/* ==========================================================================
   BitMonz Character Creator (register.php) - 16.08. Neuaufbau in 4 Schritten
   Design: Dark-Navy, angeschraegte Boxen (clip-path), Verlaufs-Rahmen,
   Schritt-Farben Cyan / Lila / Gruen / Gold. Voll responsiv.
   ========================================================================== */

:root {
    --bg0: #05080f;
    --bg1: #0a1120;
    --txt: #dbe6f7;
    --muted: #8fa3c7;
    --label: #a9bad9;
    --box: #0b1322;
    --box-bd: #182741;
    --inp: #0a1220;
    --inp-bd: #1c2c48;
    --ok: #4ade80;
    --bad: #ff6b6b;
    --font: 'JetBrains Mono', 'Courier New', monospace;
    --cut: 16px;
}

/* Schritt-Farben: werden per data-c auf Panel/Step/Modal gesetzt */
[data-c="cyan"]   { --ac: #33d6ff; --ac2: #16a8d8; --ac-rgb: 51,214,255;  --ac-txt: #bff0ff; --btn1: #0f4d6b; --btn2: #0a3352; --tint: #0d2a3f; }
[data-c="purple"] { --ac: #c063ff; --ac2: #8b3fd6; --ac-rgb: 192,99,255;  --ac-txt: #ead2ff; --btn1: #3f1a72; --btn2: #2a1152; --tint: #26164a; }
[data-c="green"]  { --ac: #5be27a; --ac2: #2fa955; --ac-rgb: 91,226,122;  --ac-txt: #dcffe3; --btn1: #1f7236; --btn2: #134d25; --tint: #12331d; }
[data-c="gold"]   { --ac: #f5c832; --ac2: #c99a1a; --ac-rgb: 245,200,50;  --ac-txt: #ffeaa6; --btn1: #7d5c12; --btn2: #5a4210; --tint: #3a2c0d; }

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    font-family: var(--font);
    color: var(--txt);
    background: var(--bg0);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Hintergrund: dunkles Navy + feines Raster + zwei Lichtflecken */
.reg-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(700px 420px at 12% 8%,  rgba(51,214,255,.07), transparent 70%),
        radial-gradient(700px 480px at 88% 92%, rgba(192,99,255,.06), transparent 70%),
        linear-gradient(rgba(60,90,140,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(60,90,140,.06) 1px, transparent 1px),
        linear-gradient(180deg, #070c16 0%, #060a12 100%);
    background-size: auto, auto, 40px 40px, 40px 40px, auto;
}

.lang-switcher { position: fixed; top: 14px; right: 16px; z-index: 30; display: flex; gap: 8px; }
.flag-btn { width: 32px; height: 22px; border-radius: 3px; opacity: .45; border: 2px solid transparent; cursor: url('../img/cursors/hand.png') 2 0, pointer; transition: opacity .15s, border-color .15s; }
.flag-btn:hover { opacity: .85; }
.flag-btn.active { opacity: 1; border-color: #33d6ff; }

.reg-wrap {
    position: relative; z-index: 1;
    width: 100%; max-width: 1180px; margin: 0 auto;
    padding: 22px 16px 40px;
    display: flex; flex-direction: column; align-items: center;
}

/* --------------------------------------------------------------------------
   Stepper
   -------------------------------------------------------------------------- */
.reg-stepper {
    display: flex; align-items: center; justify-content: center;
    gap: 6px; flex-wrap: nowrap;
    width: 100%; margin: 6px 0 44px;
}
.reg-step {
    background: none; border: 0; cursor: url('../img/cursors/mouse.png') 2 0, default; font-family: inherit;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 4px 26px; min-width: 190px; color: var(--muted);
}
.reg-step.is-done { cursor: url('../img/cursors/hand.png') 2 0, pointer; }
.reg-step-no { font-size: 11px; letter-spacing: 2px; color: var(--muted); font-weight: 500; }
.reg-step-title { font-size: 14px; letter-spacing: 1.6px; font-weight: 800; color: var(--ac); opacity: .55; white-space: nowrap; transition: opacity .2s; }
.reg-step.is-active .reg-step-title,
.reg-step.is-done .reg-step-title { opacity: 1; }
.reg-step.is-active .reg-step-title { text-shadow: 0 0 14px rgba(var(--ac-rgb), .55); }
.reg-step.is-done:hover .reg-step-title { text-decoration: underline; text-underline-offset: 4px; }
.reg-step-sep { width: 18px; height: 18px; color: var(--muted); opacity: .8; }
.reg-step-sep svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }

/* --------------------------------------------------------------------------
   Panel (angeschraegt, Verlaufs-Rahmen, Glow)
   -------------------------------------------------------------------------- */
.reg-panel {
    display: none; position: relative;
    width: 100%; max-width: 456px;
    filter: drop-shadow(0 0 22px rgba(var(--ac-rgb), .16)) drop-shadow(0 12px 30px rgba(0,0,0,.55));
    animation: regIn .28s ease-out;
}
.reg-panel.is-active { display: block; }
@keyframes regIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Chamfer-Technik: Element = Rahmen (Verlauf), ::after = Fuellung 1px innen */
.reg-panel-border, .reg-box, .reg-preview, .reg-modal-card > .reg-panel-border {
    position: relative; isolation: isolate;
    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));
}
.reg-panel-border::before, .reg-box::before, .reg-preview::before {
    content: ""; position: absolute; inset: 0; z-index: -2; background: var(--bd);
}
.reg-panel-border::after, .reg-box::after, .reg-preview::after {
    content: ""; position: absolute; inset: var(--bw, 1px); z-index: -1; background: var(--fill);
    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));
}

.reg-panel-border {
    --cut: 16px; --bw: 1px;
    --bd: linear-gradient(155deg, var(--ac) 0%, rgba(var(--ac-rgb), .55) 18%, rgba(var(--ac-rgb), .22) 45%,
                          rgba(var(--ac-rgb), .22) 60%, rgba(var(--ac-rgb), .6) 85%, var(--ac) 100%);
    --fill: linear-gradient(180deg, rgba(11,17,31,.97) 0%, rgba(7,11,20,.99) 100%);
}
.reg-panel-in { position: relative; padding: 46px 22px 16px; }

/* Ecken-Deko: kleine Schaltkreis-Linien + Kreuz, sehr dezent */
.reg-deco { position: absolute; width: 46px; height: 46px; pointer-events: none; opacity: .5; }
.reg-deco::before, .reg-deco::after { content: ""; position: absolute; background: rgba(var(--ac-rgb), .5); }
.reg-deco-tl { top: 24px; left: 20px; }
.reg-deco-tr { top: 24px; right: 20px; transform: scaleX(-1); }
.reg-deco-bl { bottom: 8px; left: 20px; transform: scaleY(-1); }
.reg-deco-br { bottom: 8px; right: 20px; transform: scale(-1); }
.reg-deco::before { left: 0; top: 0; width: 22px; height: 1px; }
.reg-deco::after  { left: 0; top: 0; width: 1px; height: 14px; }
.reg-deco-tl::before, .reg-deco-tr::before, .reg-deco-bl::before, .reg-deco-br::before {
    box-shadow: 30px 6px 0 -0.5px rgba(var(--ac-rgb), .35);
}

/* Hexagon-Badge oben (ausserhalb des geclippten Rahmens, sonst abgeschnitten) */
.reg-badge {
    position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
    width: 62px; height: 62px; z-index: 3;
    filter: drop-shadow(0 0 12px rgba(var(--ac-rgb), .5));
}
.reg-badge::before, .reg-badge-in {
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* Rahmen als Pseudo-Element (Filter + clip-path am selben Element wuerde den Glow abschneiden) */
.reg-badge::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ac) 0%, rgba(var(--ac-rgb), .55) 100%); }
.reg-badge-in {
    position: absolute; inset: 2px;
    background: radial-gradient(circle at 50% 30%, #13203a 0%, #0a1222 70%);
    display: flex; align-items: center; justify-content: center;
}
.reg-badge-in svg { width: 26px; height: 26px; fill: none; stroke: var(--ac); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.reg-h {
    text-align: center; font-size: 15px; letter-spacing: 2px; font-weight: 800;
    color: var(--ac); margin: 0 0 8px; text-shadow: 0 0 12px rgba(var(--ac-rgb), .35);
}
.reg-sub { text-align: center; font-size: 11px; line-height: 1.6; color: var(--label); margin: 0 auto 18px; max-width: 330px; }
.reg-sub-solo { margin-top: 2px; }

/* Innere Boxen */
.reg-box {
    --cut: 10px; --bw: 1px;
    --bd: var(--box-bd); --fill: var(--box);
    padding: 16px 16px 6px; margin-bottom: 14px;
}
.reg-box-title { font-size: 10px; letter-spacing: 1.4px; font-weight: 700; color: var(--label); margin: 0 0 10px; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Formular (Step 1)
   -------------------------------------------------------------------------- */
.reg-field { margin-bottom: 12px; }
.reg-field label { display: block; font-size: 10px; letter-spacing: 1.4px; font-weight: 700; color: var(--label); margin-bottom: 6px; text-transform: uppercase; }
.reg-input { position: relative; display: flex; align-items: center; }
.reg-input input, .reg-input select {
    width: 100%; height: 38px; padding: 0 34px 0 38px;
    background: var(--inp); border: 1px solid var(--inp-bd); border-radius: 4px;
    color: var(--txt); font-family: inherit; font-size: 12.5px; outline: none;
    transition: border-color .15s, box-shadow .15s;
    appearance: none; -webkit-appearance: none;
}
.reg-input-plain input { padding-left: 14px; padding-right: 14px; }
.reg-input input::placeholder { color: #4d5f84; }
.reg-input input:focus, .reg-input select:focus { border-color: rgba(var(--ac-rgb), .75); box-shadow: 0 0 0 2px rgba(var(--ac-rgb), .14); }
.reg-input input[type=number] { -moz-appearance: textfield; }
.reg-input input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
.reg-input-ico { position: absolute; left: 12px; width: 15px; height: 15px; color: #6f83ab; pointer-events: none; }
.reg-input-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reg-input-caret { position: absolute; right: 12px; width: 14px; height: 14px; color: #8fa3c7; pointer-events: none; }
.reg-input-caret svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; }
.reg-input select { cursor: url('../img/cursors/hand.png') 2 0, pointer; }
.reg-input select option { background: #0b1322; color: var(--txt); }
.reg-input-state { position: absolute; right: 11px; width: 16px; height: 16px; display: none; }
.reg-input-state svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.reg-field.is-ok  .reg-input-state, .reg-field.is-bad .reg-input-state, .reg-field.is-busy .reg-input-state { display: block; }
.reg-field.is-ok  .reg-input-state { color: var(--ok); }
.reg-field.is-bad .reg-input-state { color: var(--bad); }
.reg-field.is-busy .reg-input-state { color: var(--muted); animation: regSpin .8s linear infinite; }
@keyframes regSpin { to { transform: rotate(360deg); } }
.reg-field.is-bad input { border-color: rgba(255,107,107,.65); }
.reg-field.is-ok  input { border-color: rgba(74,222,128,.45); }
.reg-hint { font-size: 9.5px; line-height: 1.55; color: #6f83ab; margin-top: 6px; }
.reg-err { font-size: 10px; color: var(--bad); margin-top: 5px; min-height: 0; line-height: 1.4; }
.reg-err:empty { display: none; }
.reg-strength { display: flex; gap: 4px; margin-top: 6px; }
.reg-strength i { flex: 1; height: 3px; background: #1a2740; border-radius: 2px; }
.reg-strength[data-lvl="1"] i:nth-child(-n+1) { background: #ff6b6b; }
.reg-strength[data-lvl="2"] i:nth-child(-n+2) { background: #f5a623; }
.reg-strength[data-lvl="3"] i:nth-child(-n+3) { background: #f5c832; }
.reg-strength[data-lvl="4"] i:nth-child(-n+4) { background: #4ade80; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.reg-actions { display: flex; gap: 12px; margin-top: 4px; }
.reg-actions-single .reg-btn { width: 100%; }
.reg-actions-back { margin-top: 10px; }
.reg-actions-back .reg-btn { min-width: 118px; }
.reg-btn {
    flex: 1; height: 42px; padding: 0 18px;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font-family: inherit; font-size: 12.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    border-radius: 5px; cursor: url('../img/cursors/hand.png') 2 0, pointer; transition: filter .15s, transform .08s, box-shadow .15s;
    -webkit-tap-highlight-color: transparent;
}
.reg-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.reg-btn:active { transform: translateY(1px); }
.reg-btn:disabled { opacity: .5; cursor: url('../img/cursors/mouse.png') 2 0, not-allowed; filter: none; }
.reg-btn-primary {
    color: var(--ac-txt);
    background: linear-gradient(180deg, var(--btn1) 0%, var(--btn2) 100%);
    border: 1px solid var(--ac);
    box-shadow: 0 0 14px rgba(var(--ac-rgb), .35), inset 0 1px 0 rgba(255,255,255,.08);
    text-shadow: 0 0 8px rgba(var(--ac-rgb), .5);
}
.reg-btn-primary:hover:not(:disabled) { filter: brightness(1.15); box-shadow: 0 0 20px rgba(var(--ac-rgb), .5), inset 0 1px 0 rgba(255,255,255,.08); }
.reg-btn-ghost {
    flex: 0 0 auto; min-width: 118px;
    color: var(--label); background: #0b1322; border: 1px solid #1f2f4d;
}
.reg-btn-ghost:hover { border-color: #33466f; color: var(--txt); }
.reg-actions .reg-btn-primary { flex: 1; }
.reg-btn-loading { pointer-events: none; opacity: .75; }

.reg-dots { display: flex; justify-content: center; gap: 12px; margin: 22px 0 6px; }
.reg-dots i { width: 6px; height: 6px; border-radius: 50%; background: #2a3a5c; }
.reg-dots i.on { background: var(--ac); box-shadow: 0 0 8px rgba(var(--ac-rgb), .7); }

.reg-login-link { margin-top: 22px; font-size: 11px; color: var(--muted); text-decoration: none; letter-spacing: .5px; }
.reg-login-link:hover { color: var(--txt); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Step 2: Vorschau + Teile
   -------------------------------------------------------------------------- */
.reg-preview {
    --cut: 10px; --bw: 1px; --bd: var(--box-bd);
    --fill: radial-gradient(90% 80% at 50% 45%, #0f1a30 0%, #0a1220 75%);
    height: 236px; margin-bottom: 12px;
    display: flex; align-items: center; justify-content: center;
}
.reg-preview-grid {
    position: absolute; inset: 1px; z-index: 0; pointer-events: none; opacity: .55;
    background:
        linear-gradient(rgba(70,110,180,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(70,110,180,.10) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 40%, transparent 100%);
            mask-image: radial-gradient(70% 70% at 50% 50%, #000 40%, transparent 100%);
}
.reg-stage { position: relative; width: 200px; height: 200px; display: flex; align-items: flex-end; justify-content: center; }
/* Buehne: leuchtende Scheibe + Ringe (gibt Tiefe) */
.reg-stage-disc {
    position: absolute; left: 50%; bottom: 14px; width: 168px; height: 56px; transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, rgba(80,150,255,.42) 0%, rgba(60,110,230,.22) 40%, rgba(40,70,160,.10) 65%, transparent 72%);
    box-shadow: 0 0 30px rgba(70,130,255,.18);
}
.reg-stage-disc::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 118px; height: 40px; transform: translate(-50%,-50%);
    border-radius: 50%; border: 1px solid rgba(110,170,255,.45);
    box-shadow: 0 0 10px rgba(110,170,255,.35), inset 0 0 14px rgba(110,170,255,.15);
}
.reg-stage-disc::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 26px; transform: translate(-50%,-50%);
    border-radius: 50%; border: 1px dashed rgba(140,190,255,.35);
}
.reg-stage-ring {
    position: absolute; left: 50%; bottom: 8px; width: 190px; height: 68px; transform: translateX(-50%);
    border-radius: 50%; border: 1px solid rgba(90,140,230,.22);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
}
.reg-stage-char { position: relative; z-index: 2; margin-bottom: 30px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.55)); }
.reg-stage-char canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; width: calc(32px * var(--zoom, 3)); height: calc(64px * var(--zoom, 3)); transition: width .15s, height .15s; }
.reg-prev-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 34px; height: 34px; border: 0; background: none; color: var(--ac); cursor: url('../img/cursors/hand.png') 2 0, pointer; opacity: .85;
}
.reg-prev-arrow:hover { opacity: 1; filter: drop-shadow(0 0 6px rgba(var(--ac-rgb), .7)); }
.reg-prev-arrow svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.reg-prev-left { left: 10px; }
.reg-prev-right { right: 52px; }
.reg-prev-tools { position: absolute; right: 12px; top: 12px; z-index: 3; display: flex; flex-direction: column; gap: 8px; }
.reg-tool {
    width: 34px; height: 34px; border-radius: 6px; cursor: url('../img/cursors/hand.png') 2 0, pointer;
    background: rgba(11,19,34,.9); border: 1px solid #22355a; color: #b8c9ea;
    display: flex; align-items: center; justify-content: center; transition: border-color .15s, color .15s;
}
.reg-tool:hover { border-color: var(--ac); color: var(--ac); }
.reg-tool svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.reg-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.reg-tab {
    flex: 1; height: 32px; padding: 0 6px; cursor: url('../img/cursors/hand.png') 2 0, pointer;
    font-family: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    color: var(--label); background: #0b1322; border: 1px solid #182741; border-radius: 4px;
    transition: background .15s, border-color .15s, color .15s;
}
.reg-tab:hover { border-color: #2a3f66; color: var(--txt); }
.reg-tab.is-active { background: var(--tint); border-color: var(--ac); color: var(--ac-txt); box-shadow: 0 0 10px rgba(var(--ac-rgb), .25); }

.reg-box-parts { padding-bottom: 14px; }
.reg-parts {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px;
    max-height: 132px; overflow-y: auto; padding: 2px; margin: -2px;
    scrollbar-width: thin; scrollbar-color: #2a3f66 transparent;
}
.reg-parts::-webkit-scrollbar { width: 6px; }
.reg-parts::-webkit-scrollbar-thumb { background: #2a3f66; border-radius: 3px; }
.reg-part {
    aspect-ratio: 1 / 1; border-radius: 6px; cursor: url('../img/cursors/hand.png') 2 0, pointer; padding: 0;
    background: #0a1220; border: 1px solid #182741; overflow: hidden;
    display: flex; align-items: center; justify-content: center; position: relative;
    transition: border-color .15s, box-shadow .15s, transform .08s;
}
.reg-part:hover { border-color: #33466f; transform: translateY(-1px); }
.reg-part.is-selected { border-color: var(--ac); box-shadow: 0 0 0 1px rgba(var(--ac-rgb), .5), 0 0 12px rgba(var(--ac-rgb), .35); }
.reg-part canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.reg-part-none { font-size: 9px; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.reg-colors-wrap { margin-top: 14px; }
.reg-colors-wrap[hidden] { display: none; }
.reg-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.reg-color {
    width: 22px; height: 22px; border-radius: 4px; cursor: url('../img/cursors/hand.png') 2 0, pointer; padding: 0;
    border: 1px solid rgba(255,255,255,.14); background: #444; position: relative;
    transition: transform .08s, box-shadow .15s;
}
.reg-color:hover { transform: translateY(-1px); }
.reg-color.is-selected { box-shadow: 0 0 0 2px #0b1322, 0 0 0 3px var(--ac), 0 0 10px rgba(var(--ac-rgb), .5); }
.reg-color-none { background: repeating-linear-gradient(135deg, #1a2740 0 4px, #0e1727 4px 8px) !important; }

/* --------------------------------------------------------------------------
   Step 3: Teams
   -------------------------------------------------------------------------- */
.reg-teams { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 4px 0 14px; }
.reg-team {
    position: relative; background: none; border: 0; padding: 8px 4px 10px; cursor: url('../img/cursors/hand.png') 2 0, pointer;
    display: flex; flex-direction: column; align-items: center; gap: 0;
    opacity: .82; transition: opacity .15s, transform .12s; -webkit-tap-highlight-color: transparent;
}
.reg-team:hover { opacity: 1; transform: translateY(-2px); }
.reg-team.is-selected { opacity: 1; }
.reg-team img { width: 74px; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; display: block; margin: -22px 0 -24px; /* PNG hat oben/unten transparenten Rand */ filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.reg-team-plate {
    position: relative; z-index: 2; width: 100%; padding: 6px 4px 8px; text-align: center;
    font-size: 10px; line-height: 1.35; letter-spacing: 1.2px; font-weight: 800; color: var(--tc);
    background: linear-gradient(180deg, var(--tp1), var(--tp2)); border: 1px solid var(--tb);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), 50% 100%, 0 calc(100% - 7px));
    text-shadow: 0 0 6px rgba(0,0,0,.6);
}
.reg-team[data-team="ice"]     { --tc: #8ce4ff; --tb: #2c8fd6; --tp1: #0f3f77; --tp2: #0a2a55; --tglow: 51,214,255; }
.reg-team[data-team="nature"]  { --tc: #b6f5a3; --tb: #4aa844; --tp1: #1f5a1e; --tp2: #133c15; --tglow: 91,226,122; }
.reg-team[data-team="fire"]    { --tc: #ffb08a; --tb: #d64f2c; --tp1: #6d1f14; --tp2: #47140d; --tglow: 255,110,70; }
.reg-team[data-team="thunder"] { --tc: #ffe38a; --tb: #d6a12c; --tp1: #6d5010; --tp2: #47340b; --tglow: 245,200,50; }
.reg-team-corner { position: absolute; width: 14px; height: 14px; opacity: 0; transition: opacity .15s; border: 0 solid rgb(var(--tglow)); filter: drop-shadow(0 0 4px rgba(var(--tglow), .8)); }
.reg-team.is-selected .reg-team-corner { opacity: 1; }
.c-tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.c-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.c-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.c-br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.reg-team.is-selected::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 4px;
    background: radial-gradient(60% 50% at 50% 55%, rgba(var(--tglow), .12), transparent 75%);
}

.reg-team-info { display: grid; grid-template-columns: 1fr 132px; gap: 14px; padding: 16px 16px 16px; }
.reg-team-info-head { display: flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: 1.6px; font-weight: 800; color: var(--tc, var(--ac)); margin-bottom: 10px; }
.reg-team-ico { width: 20px; height: 20px; display: inline-flex; }
.reg-team-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reg-team-desc { font-size: 11px; line-height: 1.65; color: var(--txt); margin-bottom: 14px; }
.reg-team-perks-title { font-size: 10px; letter-spacing: 1.4px; font-weight: 800; color: var(--tc, var(--ac)); margin-bottom: 8px; }
.reg-team-perks { list-style: none; }
.reg-team-perks li { font-size: 11px; line-height: 1.7; color: var(--txt); padding-left: 16px; position: relative; }
.reg-team-perks li::before { content: "+"; position: absolute; left: 0; color: var(--tc, var(--ac)); font-weight: 800; }
.reg-team-info[data-team="ice"]     { --tc: #33d6ff; }
.reg-team-info[data-team="nature"]  { --tc: #5be27a; }
.reg-team-info[data-team="fire"]    { --tc: #ff7a5c; }
.reg-team-info[data-team="thunder"] { --tc: #f5c832; }
.reg-team-scene { position: relative; align-self: center; width: 132px; height: 132px; border-radius: 6px; overflow: hidden; background: #0a1220; border: 1px dashed #2a3f66; }
.reg-team-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.reg-team-scene.has-img img { display: block; }
.reg-team-scene.has-img { border-style: solid; border-color: #1f2f4d; }
.reg-team-scene.has-img .reg-team-scene-ph { display: none; }
.reg-team-scene-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size: 10px; line-height: 1.5; color: #4d5f84; padding: 8px; }
.reg-team-scene-ph small { font-size: 8px; word-break: break-all; }

/* --------------------------------------------------------------------------
   Step 4: Zusammenfassung
   -------------------------------------------------------------------------- */
.reg-sum { padding: 14px 16px 12px; }
.reg-sum-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12px; letter-spacing: 1.6px; font-weight: 800; color: var(--ac); }
.reg-edit { background: none; border: 0; cursor: url('../img/cursors/hand.png') 2 0, pointer; font-family: inherit; font-size: 9.5px; letter-spacing: 1px; font-weight: 800; color: var(--ac); display: inline-flex; align-items: center; gap: 5px; opacity: .85; }
.reg-edit:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.reg-edit svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reg-sum-rows { display: flex; flex-direction: column; gap: 7px; }
.reg-sum-row { display: grid; grid-template-columns: 16px 1fr 1fr; align-items: center; gap: 8px; font-size: 11px; }
.reg-sum-row .k { color: var(--label); }
.reg-sum-row .v { color: var(--txt); text-align: left; overflow-wrap: anywhere; }
.reg-sum-row .i { width: 14px; height: 14px; color: #6f83ab; }
.reg-sum-row .i svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reg-sum-char { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; }
.reg-sum-sprite { display: flex; align-items: center; justify-content: center; }
.reg-sum-sprite canvas { width: 64px; height: 128px; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.reg-sum-char .reg-sum-row { grid-template-columns: 1fr 1fr; }
.reg-sum-team { display: flex; align-items: center; gap: 14px; }
.reg-sum-team img { width: 34px; height: auto; margin: -10px 0 -12px; image-rendering: pixelated; filter: drop-shadow(0 3px 5px rgba(0,0,0,.6)); }
.reg-sum-team .n { font-size: 13px; letter-spacing: 1.6px; font-weight: 800; color: var(--tc); margin-bottom: 4px; }
.reg-sum-team .d { font-size: 10.5px; color: var(--label); }
.reg-sum-team[data-team="ice"]     { --tc: #33d6ff; }
.reg-sum-team[data-team="nature"]  { --tc: #5be27a; }
.reg-sum-team[data-team="fire"]    { --tc: #ff7a5c; }
.reg-sum-team[data-team="thunder"] { --tc: #f5c832; }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.reg-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(3,6,12,.78); padding: 16px; }
.reg-modal[hidden] { display: none; }
.reg-modal-card { width: 100%; max-width: 380px; filter: drop-shadow(0 0 22px rgba(var(--ac-rgb), .2)); animation: regIn .2s ease-out; }
.reg-modal-card .reg-panel-in { padding: 24px 22px 20px; text-align: center; }
.reg-modal-ico { width: 46px; height: 46px; margin: 0 auto 12px; color: var(--ac); }
.reg-modal-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reg-modal-card h3 { font-size: 14px; letter-spacing: 1.6px; color: var(--ac); margin-bottom: 10px; }
.reg-modal-card p { font-size: 11.5px; line-height: 1.65; color: var(--txt); margin-bottom: 18px; }
.reg-modal-card .reg-btn { width: 100%; }
.reg-modal-card[data-c="bad"] { --ac: #ff6b6b; --ac2: #c94040; --ac-rgb: 255,107,107; --ac-txt: #ffd7d7; --btn1: #6b1f1f; --btn2: #4a1414; --tint: #3a1414; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
    .reg-step { min-width: 0; padding: 4px 12px; }
    .reg-step-title { font-size: 12px; letter-spacing: 1.2px; }
}
@media (max-width: 960px) {
    /* nur der aktive Schritt mit Titel, die anderen als "STEP n" (sonst zu breit) */
    .reg-step:not(.is-active) .reg-step-title { display: none; }
}
@media (max-width: 720px) {
    .reg-wrap { padding: 40px 10px 32px; }
    .reg-stepper { gap: 2px; margin-bottom: 40px; }
    .reg-step { padding: 4px 6px; gap: 4px; flex: 0 1 auto; min-width: 0; }
    .reg-step-no { font-size: 9px; letter-spacing: 1px; }
    .reg-step-title { font-size: 10px; letter-spacing: .8px; white-space: nowrap; }
    /* am Handy nur der aktive Schritt mit Titel, die anderen als "STEP n" */
    .reg-step:not(.is-active) .reg-step-title { display: none; }
    .reg-step-sep { width: 12px; height: 12px; }
    .lang-switcher { top: 8px; right: 8px; }
    .flag-btn { width: 26px; height: 18px; }
}
@media (max-width: 480px) {
    .reg-panel { max-width: 100%; }
    .reg-panel-in { padding: 42px 14px 12px; }
    .reg-deco { display: none; }
    .reg-parts { grid-template-columns: repeat(6, 1fr); }
    .reg-tabs { flex-wrap: wrap; }
    .reg-tab { flex: 1 1 30%; }
    .reg-preview { height: 220px; }
    .reg-teams { gap: 8px; }
    .reg-team img { width: 62px; }
    .reg-team-plate { font-size: 9px; letter-spacing: .8px; }
    .reg-team-info { grid-template-columns: 1fr; }
    .reg-team-scene { width: 100%; height: 110px; }
    .reg-sum-char { grid-template-columns: 76px 1fr; }
    .reg-actions { flex-wrap: wrap; }
    .reg-actions .reg-btn-ghost { flex: 1 1 100%; order: 2; }
    .reg-actions .reg-btn-primary { flex: 1 1 100%; }
}
@media (max-width: 360px) {
    .reg-parts { grid-template-columns: repeat(5, 1fr); }
}