/* 🎨 BitMonz Website (02.08.) — Dark-Navy-Designlinie wie Login/Register/Spiel-UI.
   Responsive: Desktop / Tablet / Smartphone (mobile-first Breakpoints unten). */

:root {
    --bg0: #0a1220;
    --bg1: #111d33;
    --bg2: #0d1626;
    --line: #263a5e;
    --line2: #2a4066;
    --accent: #4a86e8;
    --gold: #ffd76a;
    --txt: #eaf2ff;
    --txt2: #b7c8e6;
    --txt3: #9fb3d6;
    --ok: #37e07b;
    --bad: #ff5f5f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: radial-gradient(120% 120% at 20% 0%, #16264a 0%, var(--bg0) 70%);
    color: var(--txt);
    min-height: 100vh;
}
img { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }

/* ---------- Navigation ---------- */
.bm-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 22px;
    background: rgba(9, 16, 30, .82);
    border-bottom: 1px solid rgba(38, 58, 94, .8);
    backdrop-filter: blur(10px);
}
.bm-nav-logo img { height: 40px; display: block; }
.bm-nav-burger {
    display: none;
    margin-left: auto;
    background: var(--bg1);
    color: var(--txt2);
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 18px;
    padding: 6px 12px;
    cursor: pointer;
}
.bm-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-wrap: wrap;
}
.bm-nav-links > a {
    color: var(--txt2);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 9px 12px;
    border-radius: 8px;
    transition: all .15s;
}
.bm-nav-links > a:hover { color: var(--txt); background: rgba(74, 134, 232, .12); }
.bm-nav-links > a.active { color: var(--txt); background: rgba(74, 134, 232, .18); }
.bm-lang {
    display: flex;
    gap: 4px;
    margin: 0 6px;
    padding: 4px;
    background: var(--bg0);
    border: 1px solid var(--line);
    border-radius: 8px;
}
.bm-lang button {
    background: transparent;
    color: var(--txt3);
    border: 0;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    cursor: pointer;
}
.bm-lang button.active { background: #1d3a6b; color: var(--txt); box-shadow: 0 0 8px rgba(74, 134, 232, .35); }
.bm-play-btn {
    color: var(--txt);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 10px 18px;
    border-radius: 9px;
    background: linear-gradient(160deg, #1d3a6b, #14294c);
    border: 1px solid var(--accent);
    box-shadow: 0 0 12px rgba(74, 134, 232, .3);
    transition: all .15s;
}
.bm-play-btn:hover { background: linear-gradient(160deg, #234780, #183158); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(74, 134, 232, .45); }

/* ---------- Hero ---------- */
.bm-hero {
    position: relative;
    min-height: 86vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    padding: 120px 20px 80px;
}
.bm-hero-bg {
    position: absolute;
    inset: -40px;
    background: url('../img/mainbg.webp') center 40% / cover no-repeat;
    transform: scale(1.05);
    z-index: 0;
}
.bm-hero-shade {
    position: absolute;
    inset: -40px;
    z-index: 1;
    background:
        radial-gradient(110% 90% at 50% 40%, rgba(8, 15, 30, .05) 30%, rgba(8, 15, 30, .6) 100%),
        linear-gradient(180deg, rgba(8, 15, 30, .55) 0%, rgba(8, 15, 30, .08) 34%, rgba(10, 18, 32, .92) 96%);
}
.bm-hero-inner { position: relative; z-index: 2; max-width: 760px; }
.bm-hero-inner .bm-hero-logo { max-width: min(520px, 82vw); filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .65)) drop-shadow(0 0 22px rgba(74, 134, 232, .3)); }
.bm-hero h1 {
    margin-top: 18px;
    font-size: clamp(22px, 3.2vw, 34px);
    letter-spacing: .3px;
    text-shadow: 0 3px 16px rgba(0, 0, 0, .8);
}
.bm-hero p {
    margin: 16px auto 26px;
    max-width: 620px;
    color: var(--txt2);
    font-size: clamp(14px, 1.6vw, 16.5px);
    line-height: 1.65;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}
.bm-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.bm-btn-primary {
    display: inline-block;
    padding: 14px 30px;
    font-size: 16px;
    font-weight: 700;
    color: var(--txt);
    border-radius: 11px;
    background: linear-gradient(160deg, #1d3a6b, #14294c);
    border: 1px solid var(--accent);
    box-shadow: 0 0 18px rgba(74, 134, 232, .35);
    transition: all .15s;
}
.bm-btn-primary:hover { background: linear-gradient(160deg, #234780, #183158); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(74, 134, 232, .5); }
.bm-btn-ghost {
    display: inline-block;
    padding: 14px 26px;
    font-size: 15px;
    font-weight: 700;
    color: var(--txt2);
    border-radius: 11px;
    background: rgba(16, 28, 49, .66);
    border: 1px solid var(--line);
    backdrop-filter: blur(6px);
    transition: all .15s;
}
.bm-btn-ghost:hover { color: var(--txt); border-color: var(--accent); }

/* ---------- Sections ---------- */
.bm-section { max-width: 1120px; margin: 0 auto; padding: 76px 22px 10px; }
.bm-section-head { text-align: center; margin-bottom: 36px; }
.bm-section-head h2 { font-size: clamp(24px, 3vw, 32px); }
.bm-section-head h2::after {
    content: '';
    display: block;
    width: 66px; height: 3px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.bm-section-head p { color: var(--txt3); margin-top: 12px; font-size: 15px; }

/* Pixel-Icons (img/icons statt Emojis) */
.bm-ico { width: 26px; height: 26px; image-rendering: pixelated; vertical-align: -5px; margin-right: 4px; }
.bm-server-name .bm-ico { width: 20px; height: 20px; vertical-align: -4px; margin-right: 2px; }

.bm-card {
    background: linear-gradient(165deg, rgba(17, 29, 51, .8), rgba(10, 18, 34, .8));
    border: 1px solid var(--line2);
    border-radius: 14px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
}

/* News */
.bm-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; }
.bm-news-card { padding: 20px 22px; transition: transform .15s, border-color .15s; }
.bm-news-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.bm-news-date { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .6px; }
.bm-news-card h3 { margin: 8px 0 8px; font-size: 17px; }
.bm-news-card p { color: var(--txt2); font-size: 14px; line-height: 1.6; }
.bm-news-tag {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    background: rgba(74, 134, 232, .15);
    border: 1px solid rgba(74, 134, 232, .5);
    color: #9cc0ff;
}

/* News-Seite (news.php: alle Einträge untereinander) */
.bm-news-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.bm-news-full { padding: 22px 26px; }
.bm-news-full:hover { transform: none; border-color: var(--line2); }
.bm-news-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.bm-news-meta .bm-news-tag { margin-bottom: 0; }

/* Features */
.bm-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.bm-feature { padding: 24px; transition: transform .15s, border-color .15s; }
.bm-feature:hover { transform: translateY(-3px); border-color: var(--accent); }
.bm-feature .ico {
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: rgba(74, 134, 232, .14);
    border: 1px solid rgba(74, 134, 232, .45);
    margin-bottom: 14px;
}
.bm-feature .ico img { width: 30px; height: 30px; image-rendering: pixelated; }
.bm-feature h3 { font-size: 17px; margin-bottom: 8px; }
.bm-feature p { color: var(--txt2); font-size: 14px; line-height: 1.65; }
.bm-flow { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 30px; color: var(--txt3); font-size: 13.5px; font-weight: 700; }
.bm-flow .step { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(16, 28, 49, .8); border: 1px solid var(--line); }
.bm-flow .step img { width: 20px; height: 20px; image-rendering: pixelated; }
.bm-flow .arr { color: var(--accent); }

/* Gallery */
.bm-gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.bm-shot { overflow: hidden; position: relative; }
.bm-shot .ph {
    aspect-ratio: 16 / 9;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    color: var(--txt3);
    font-size: 13px; font-weight: 600;
    background:
        linear-gradient(135deg, rgba(74, 134, 232, .08) 25%, transparent 25%, transparent 50%, rgba(74, 134, 232, .08) 50%, rgba(74, 134, 232, .08) 75%, transparent 75%) 0 0 / 28px 28px,
        rgba(10, 18, 32, .6);
}
.bm-shot .ph .big { font-size: 30px; opacity: .8; }
.bm-shot img, .bm-shot video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.bm-shot figcaption { padding: 12px 16px; font-size: 13px; color: var(--txt2); }
.bm-shot figcaption b { color: var(--txt); display: block; margin-bottom: 3px; font-size: 14px; }

/* Pedia-Teaser */
.bm-pedia-teaser { display: flex; align-items: center; gap: 26px; padding: 28px; flex-wrap: wrap; }
.bm-pedia-teaser .txt { flex: 1 1 320px; }
.bm-pedia-teaser .txt p { color: var(--txt2); font-size: 14.5px; line-height: 1.65; margin: 8px 0 18px; }
.bm-pedia-mons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bm-pedia-mons img {
    width: 72px; height: 72px;
    object-fit: contain;
    image-rendering: pixelated;
    background: rgba(10, 18, 32, .8);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px;
}

/* Serverliste */
.bm-servers { overflow: hidden; }
.bm-server-row {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr .9fr .9fr;
    gap: 10px;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(38, 58, 94, .5);
    font-size: 14px;
}
.bm-server-row.head { color: var(--txt3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; background: rgba(10, 18, 32, .6); }
.bm-server-row:last-child { border-bottom: 0; }
.bm-server-name { font-weight: 700; display: flex; align-items: center; gap: 9px; }
.bm-server-name .rico { font-size: 17px; }
.bm-status { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.bm-status .dot { width: 9px; height: 9px; border-radius: 50%; background: #888; }
.bm-status.online .dot { background: var(--ok); box-shadow: 0 0 7px rgba(55, 224, 123, .9); }
.bm-status.online { color: var(--ok); }
.bm-status.offline .dot { background: var(--bad); box-shadow: 0 0 7px rgba(255, 95, 95, .8); }
.bm-status.offline { color: var(--bad); }
.bm-load-bar { height: 8px; border-radius: 4px; background: rgba(10, 18, 32, .9); border: 1px solid var(--line); overflow: hidden; }
.bm-load-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #37e07b, #ffd76a); border-radius: 4px; }
.bm-load-txt { color: var(--txt3); font-size: 12px; margin-top: 4px; }

/* Kontakt */
.bm-contact-wrap { max-width: 640px; margin: 0 auto; padding: 28px; }
.bm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bm-field { margin-bottom: 15px; }
.bm-field label { display: block; color: var(--txt3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.bm-field input, .bm-field select, .bm-field textarea {
    width: 100%;
    padding: 12px 13px;
    color: var(--txt);
    font-size: 14px;
    font-family: inherit;
    background: rgba(10, 18, 32, .92);
    border: 1px solid var(--line);
    border-radius: 9px;
    transition: border-color .15s, box-shadow .15s;
}
.bm-field textarea { min-height: 130px; resize: vertical; }
.bm-field input:focus, .bm-field select:focus, .bm-field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(74, 134, 232, .16);
}
.bm-captcha { display: flex; align-items: center; gap: 12px; }
.bm-captcha .q { padding: 11px 16px; border-radius: 9px; background: rgba(29, 58, 107, .5); border: 1px solid var(--accent); font-weight: 700; letter-spacing: 1px; white-space: nowrap; }
.bm-captcha input { max-width: 120px; }
.bm-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.bm-form-note { color: var(--txt3); font-size: 12px; line-height: 1.55; margin: 4px 0 16px; }
.bm-form-msg { min-height: 20px; font-size: 13.5px; font-weight: 600; margin-top: 12px; text-align: center; }
.bm-form-msg.ok { color: var(--ok); }
.bm-form-msg.err { color: var(--bad); }
.bm-submit {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--txt);
    background: linear-gradient(160deg, #1d3a6b, #14294c);
    border: 1px solid var(--accent);
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(74, 134, 232, .25);
    transition: all .15s;
}
.bm-submit:hover:not(:disabled) { background: linear-gradient(160deg, #234780, #183158); transform: translateY(-1px); }
.bm-submit:disabled { opacity: .5; cursor: not-allowed; }

/* Shop */
.bm-shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.bm-shop-card { padding: 26px; text-align: center; position: relative; overflow: hidden; }
.bm-shop-card .ico { margin-bottom: 14px; }
.bm-shop-card .ico img { width: 46px; height: 46px; image-rendering: pixelated; }
.bm-shop-card h3 { margin-bottom: 8px; }
.bm-shop-card p { color: var(--txt2); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.bm-soon {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .6px;
    color: var(--gold);
    background: rgba(255, 215, 106, .1);
    border: 1px solid rgba(255, 215, 106, .5);
}

/* Pedia-Seite */
.bm-pedia-tools { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 24px; }
.bm-pedia-tools input, .bm-pedia-tools select {
    padding: 11px 13px;
    color: var(--txt);
    font-size: 14px;
    background: rgba(10, 18, 32, .92);
    border: 1px solid var(--line);
    border-radius: 9px;
}
.bm-pedia-tools input { min-width: 220px; }

/* Custom-Dropdowns (nie native Optik) */
.bm-select, .bm-field select, .bm-pedia-tools select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238fb0e8' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
}
.bm-select option, .bm-field select option, .bm-pedia-tools select option {
    background: #0d1626;
    color: var(--txt);
}
.bm-select:focus, .bm-pedia-tools select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(74, 134, 232, .16);
}
.bm-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 22px; }
.bm-tab {
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--txt3);
    background: rgba(16, 28, 49, .8);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
}
.bm-tab.active { color: var(--txt); background: #1d3a6b; border-color: var(--accent); box-shadow: 0 0 12px rgba(74, 134, 232, .3); }
.bm-pedia-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; padding-bottom: 40px; }

/* Mon-Cards v2: bb-Hintergrund, Atmen + Blinzeln wie im Spiel, KEIN Hover (nicht interaktiv) */
.bm-mon-card2 { overflow: hidden; display: flex; flex-direction: column; }
.bm-mon-card2 .mon-stage {
    position: relative;
    height: 150px;
    display: flex; align-items: flex-end; justify-content: center;
    background-color: rgba(10, 18, 32, .85);
    background-size: cover;
    background-position: center bottom;
    image-rendering: pixelated;
    border-bottom: 1px solid var(--line2);
}
.bm-mon-card2 .mon-stage::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 18, 32, .25), rgba(10, 18, 32, 0) 40%);
    pointer-events: none;
}
.bm-mon-card2 .mon-eles {
    position: absolute; top: 8px; left: 8px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 7px;
    background: rgba(8, 14, 26, .78);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 9px;
}
.bm-mon-card2 .mon-eles img { width: 18px; height: 18px; image-rendering: pixelated; display: block; }
.bm-mon-card2 .mon-eles .ele-dot { width: 12px; height: 12px; border-radius: 50%; display: block; }
.bm-mon-card2 .mon-sprite {
    position: relative; z-index: 1;
    width: 104px; height: 104px;
    margin-bottom: 8px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
}
@keyframes bmzBreathe {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1, 0.97); }
}
.bmz-breathe { animation: bmzBreathe 4s ease-in-out infinite; transform-origin: bottom center; }
.bm-mon-card2 .mon-info { padding: 14px 16px 16px; text-align: left; }
.bm-mon-card2 .mon-info h3 { margin: 0 0 8px; font-size: 16px; }
.bm-mon-card2 .desc { color: var(--txt2); font-size: 12.5px; line-height: 1.55; margin-top: 9px; text-align: left; }
.bm-ele {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px 3px 6px;
    margin: 0 6px 4px 0;
    border-radius: 999px;
    font-size: 11px; font-weight: 700;
    border: 1px solid rgba(0, 0, 0, .35);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.bm-ele img { width: 15px; height: 15px; image-rendering: pixelated; }

/* Item-Cards (Icon auf Stage, Seltenheits-Rahmen, WoW-Tooltip) */
.bm-item-card .mon-stage.item-stage { height: 110px; align-items: center; }
.bm-item-card .item-ico { width: 58px; height: 58px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .5)); }
.bm-item-card .mon-info h3 { font-size: 15px; }

/* WoW-Hover-Tooltip (wie im Spiel) */
.bm-wow-tip {
    position: fixed;
    z-index: 9999;
    min-width: 220px; max-width: 300px;
    pointer-events: none;
    background: linear-gradient(170deg, rgba(13, 22, 38, .97), rgba(8, 14, 26, .97));
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .65);
    font-size: 13px;
}
.bm-wow-tip .wt-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 11px 14px 9px;
    border-bottom: 1px solid var(--line);
}
.bm-wow-tip .wt-name { font-weight: 800; font-size: 14.5px; }
.bm-wow-tip .wt-rar { font-size: 11px; font-weight: 700; white-space: nowrap; }
.bm-wow-tip .wt-body { padding: 10px 14px 12px; }
.bm-wow-tip .wt-desc { color: var(--txt2); line-height: 1.5; font-size: 12.5px; margin: 0; }
.bm-wow-tip .wt-desc:empty { display: none; }
.bm-wow-tip .wt-stats:not(:empty) { margin-top: 8px; }
.bm-wow-tip .wt-stat { font-weight: 700; font-size: 12.5px; }
.bm-wow-tip .wt-stat.wt-hp { color: #37e07b; }
.bm-wow-tip .wt-stat.wt-mp { color: #5aa0ff; }
.bm-wow-tip .wt-type { color: var(--txt3); font-size: 11px; text-transform: uppercase; letter-spacing: .8px; margin-top: 8px; }
.bm-wow-tip .wt-type:empty { display: none; }
.bm-badges { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.bm-badge { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--line); color: var(--txt2); background: rgba(10, 18, 32, .7); }
.bm-badge.rar-common { color: #c2c2c2; }
.bm-badge.rar-normal { color: #dcdcdc; }
.bm-badge.rar-uncommon { color: #1eff00; border-color: rgba(30, 255, 0, .4); }
.bm-badge.rar-rare { color: #4a9bff; border-color: rgba(0, 112, 221, .5); }
.bm-badge.rar-epic { color: #a335ee; border-color: rgba(163, 53, 238, .5); }
.bm-badge.rar-legendary { color: #ff8000; border-color: rgba(255, 128, 0, .5); }
.bm-badge.rar-unique { color: #ff4040; border-color: rgba(255, 0, 0, .5); }
.bm-loading { text-align: center; color: var(--txt3); padding: 40px 0; }

/* Legal */
.bm-legal { max-width: 780px; margin: 0 auto; padding: 120px 22px 60px; line-height: 1.7; }
.bm-legal h1 { margin-bottom: 24px; }
.bm-legal h2 { margin: 28px 0 10px; font-size: 19px; color: var(--txt); }
.bm-legal p, .bm-legal li { color: var(--txt2); font-size: 14.5px; }
.bm-legal ul { padding-left: 22px; margin: 8px 0; }
.bm-legal .bm-card { padding: 20px 24px; margin: 14px 0; }

/* Footer */
.bm-footer { margin-top: 80px; background: rgba(8, 14, 26, .9); border-top: 1px solid rgba(38, 58, 94, .8); }
.bm-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 22px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 30px;
}
/* 16.09.: display:flex statt inline-flex, sonst standen X und Discord nebeneinander
   (die Regel schlug .bm-footer-col a { display:block } wegen hoeherer Spezifitaet). */
.bm-footer-col .bm-soc { display: flex; align-items: center; gap: 8px; }
.bm-footer-col .bm-soc svg { width: 16px; height: 16px; flex: 0 0 auto; }
.bm-footer-col .bm-soc:hover svg { color: var(--accent); }
.bm-footer-logo { height: 44px; margin-bottom: 12px; }
.bm-footer-col h4 { color: var(--txt); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.bm-footer-col p { color: var(--txt3); font-size: 13px; line-height: 1.6; }
.bm-footer-col a { display: block; color: var(--txt2); font-size: 13.5px; padding: 4px 0; }
.bm-footer-col a:hover { color: var(--txt); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .bm-nav { flex-wrap: wrap; }
    .bm-nav-burger { display: block; }
    .bm-nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding-top: 10px;
    }
    .bm-nav-links.open { display: flex; }
    .bm-nav-links > a { padding: 12px 10px; }
    .bm-lang { justify-content: center; margin: 8px 0; }
    .bm-play-btn { text-align: center; margin-top: 6px; }
    .bm-form-row { grid-template-columns: 1fr; }
    .bm-server-row { grid-template-columns: 1.3fr 1fr .9fr; }
    .bm-server-row .col-load { display: none; }
    .bm-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .bm-hero { min-height: 74vh; padding-top: 96px; }
    .bm-section { padding: 56px 16px 6px; }
    .bm-server-row { grid-template-columns: 1.2fr .9fr; font-size: 13px; }
    .bm-server-row .col-region { display: none; }
    .bm-pedia-tools input { min-width: 0; flex: 1 1 100%; }
    .bm-footer-inner { grid-template-columns: 1fr; gap: 22px; }
}

/* =============================================================================
   ✨ v2 — Landingpage + BitMonPedia neu (15.09.2026)
   Sven: "alles besser und innovativer, freundlicher. Diese Boxen, nicht schoen
   aufgeraeumt. Die Texte schlanker, praeziser, fuer Lesefaule, eventuell mit
   'mehr' anzeigen. BitMonPedia muss auch besser werden ... es muss richtig
   einen WOW-Effekt haben."
   -----------------------------------------------------------------------------
   Was sich gegenueber v1 aendert und warum:

   • WEG VON SECHS GLEICHEN KAESTEN. Ein Raster aus identischen Karten sagt dem
     Auge: alles gleich wichtig, such dir was aus. Genau das wirkt unaufgeraeumt.
     Stattdessen ein Bento-Raster mit unterschiedlich grossen Kacheln: zwei
     grosse Bilder tragen die Geschichte, vier kleine ergaenzen sie.
   • KURZ ZUERST, LANG AUF WUNSCH. Jede Kachel hat zwei Saetze und einen
     "Mehr"-Knopf. Wer lesen will, klappt auf; wer nicht, sieht trotzdem alles
     Wichtige. Umgesetzt mit <details>, damit es auch ohne JS funktioniert.
   • FREUNDLICHER. Waermerer zweiter Akzent (Bernstein) neben dem kuehlen Blau,
     weichere Rundungen, mehr Luft, weniger harte Rahmen: statt Kasten-Linien
     tragen Verlauf und Schatten die Flaechen.
   ============================================================================= */

:root {
    --warm: #ffb347;          /* zweiter, warmer Akzent */
    --warm-soft: rgba(255, 179, 71, .14);
    --cy: #5fe6ff;
    --cy-rgb: 95, 230, 255;
    --ink: #eaf2ff;
    --ink2: #a9bedd;
    --ink3: #7e93b5;
    --r: 18px;               /* eine Rundung fuer alles Grosse */
    --r-s: 12px;
}

.v2 { --pad: clamp(18px, 4vw, 34px); }

/* ── Abschnitt ───────────────────────────────────────────────────────────── */
.v2-sec { max-width: 1180px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) 22px 0; }
.v2-sec.tight { padding-top: clamp(34px, 5vw, 56px); }

.v2-head { max-width: 680px; margin: 0 0 clamp(26px, 4vw, 40px); }
.v2-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.v2-kicker {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
    color: var(--cy); margin-bottom: 12px;
}
.v2-kicker::before {
    content: ""; width: 22px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--cy));
}
.v2-head h2 {
    font-size: clamp(26px, 4vw, 40px); line-height: 1.15; letter-spacing: -.5px;
    color: var(--ink);
}
.v2-head p { margin-top: 14px; color: var(--ink2); font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.65; }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.v2-hero {
    position: relative; overflow: hidden;
    min-height: min(92vh, 860px);
    display: flex; align-items: center; justify-content: center;
    padding: 120px 22px 70px; text-align: center;
}
.v2-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(95, 230, 255, .16), transparent 60%),
        radial-gradient(70% 60% at 85% 90%, rgba(255, 179, 71, .1), transparent 62%),
        radial-gradient(120% 120% at 20% 0%, #16264a 0%, #0a1220 70%);
}
/* Feines Raster: gibt der Flaeche Halt, ohne eine Box zu sein */
.v2-hero-grid {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
    background-image:
        linear-gradient(rgba(95, 230, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 230, 255, .055) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(70% 60% at 50% 35%, #000 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 20%, transparent 80%);
}
.v2-hero-inner { position: relative; z-index: 3; max-width: 860px; }
.v2-hero-logo {
    max-width: min(460px, 78vw); display: block; margin: 0 auto 22px;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .7)) drop-shadow(0 0 26px rgba(95, 230, 255, .28));
    animation: v2Float 7s ease-in-out infinite;
}
@keyframes v2Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.v2-hero h1 {
    font-size: clamp(28px, 5.2vw, 52px); line-height: 1.1; letter-spacing: -1px;
    margin-bottom: 16px;
}
.v2-hero h1 em {
    font-style: normal;
    background: linear-gradient(100deg, var(--cy), #8fd0ff 45%, var(--warm));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.v2-hero-sub {
    color: var(--ink2); font-size: clamp(15px, 1.8vw, 19px); line-height: 1.6;
    max-width: 620px; margin: 0 auto 30px;
}

/* BitMonz, die im Hero herumschweben. Rein dekorativ, per aria-hidden. */
.v2-hero-mons { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.v2-hero-mons img {
    position: absolute; width: clamp(54px, 7vw, 96px); image-rendering: pixelated;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6));
    animation: v2Bob 6s ease-in-out infinite;
    opacity: .9;
}
@keyframes v2Bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-16px) rotate(1deg); } }
/* 16.09.: rechte Heroseite blickt zur Mitte. Eigene scale-Eigenschaft statt
   transform, damit die v2Bob-Animation sie nicht ueberschreibt. */
.v2-hero-mons img.flip { scale: -1 1; }
@media (max-width: 860px) { .v2-hero-mons { display: none; } }

/* ── Knoepfe ─────────────────────────────────────────────────────────────── */
.v2-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.v2-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 15px 30px; border-radius: 999px;
    font-size: 15.5px; font-weight: 800; letter-spacing: .3px;
    border: 1px solid transparent; cursor: pointer; font-family: inherit;
    transition: transform .16s cubic-bezier(.3, 1.3, .6, 1), box-shadow .16s, background .16s, color .16s;
}
.v2-btn-primary {
    background: linear-gradient(135deg, #6ce9ff, #3d8bff 55%, #2f6fe0);
    color: #051020;
    box-shadow: 0 10px 30px rgba(61, 139, 255, .38), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.v2-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(61, 139, 255, .5); }
.v2-btn-warm {
    background: linear-gradient(135deg, #ffd08a, #ffb347 60%, #f59b2a);
    color: #2a1706;
    box-shadow: 0 10px 30px rgba(255, 179, 71, .32), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.v2-btn-warm:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(255, 179, 71, .45); }
.v2-btn-ghost {
    background: rgba(255, 255, 255, .05); color: var(--ink);
    border-color: rgba(var(--cy-rgb), .3); backdrop-filter: blur(6px);
}
.v2-btn-ghost:hover { border-color: var(--cy); color: #fff; transform: translateY(-2px); }
.v2-btn.sm { padding: 10px 20px; font-size: 13.5px; }

/* ── Vertrauens-Zeile unter dem Hero ─────────────────────────────────────── */
.v2-facts {
    display: flex; gap: clamp(18px, 4vw, 44px); justify-content: center; flex-wrap: wrap;
    margin-top: 40px; color: var(--ink3); font-size: 13px;
}
.v2-fact { display: flex; align-items: center; gap: 9px; }
.v2-fact b { color: var(--ink); font-size: 19px; font-weight: 800; }
.v2-fact .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }

/* ── Ablauf in vier Schritten ────────────────────────────────────────────── */
.v2-steps {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px; counter-reset: v2step;
}
.v2-step {
    position: relative; padding: 24px 20px 22px;
    background: linear-gradient(165deg, rgba(23, 40, 78, .55), rgba(10, 18, 34, .5));
    border-radius: var(--r);
    border: 1px solid rgba(var(--cy-rgb), .12);
    transition: transform .18s, border-color .18s, background .18s;
}
.v2-step:hover { transform: translateY(-4px); border-color: rgba(var(--cy-rgb), .45); }
.v2-step::before {
    counter-increment: v2step; content: counter(v2step);
    position: absolute; top: 16px; right: 18px;
    font-size: 40px; font-weight: 900; line-height: 1;
    color: rgba(var(--cy-rgb), .13);
}
.v2-step img { width: 36px; height: 36px; image-rendering: pixelated; margin-bottom: 12px; display: block; }
.v2-step h3 { font-size: 16px; margin-bottom: 6px; }
.v2-step p { color: var(--ink3); font-size: 13.5px; line-height: 1.6; }

/* ── BENTO: das Herz der neuen Seite ─────────────────────────────────────── */
.v2-bento {
    display: grid; gap: 16px;
    grid-template-columns: repeat(6, 1fr);
}
.v2-tile {
    position: relative; overflow: hidden;
    grid-column: span 2;
    border-radius: var(--r);
    background: linear-gradient(165deg, rgba(23, 40, 78, .6), rgba(10, 18, 34, .62));
    border: 1px solid rgba(var(--cy-rgb), .11);
    padding: var(--pad);
    display: flex; flex-direction: column;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.v2-tile:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--cy-rgb), .4);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.v2-tile.big { grid-column: span 3; }
.v2-tile.wide { grid-column: span 6; }
@media (max-width: 900px) {
    .v2-bento { grid-template-columns: repeat(2, 1fr); }
    .v2-tile, .v2-tile.big, .v2-tile.wide { grid-column: span 2; }
}

/* Bildflaeche laeuft bis an die Kachelkante, kein Kasten im Kasten */
.v2-tile-media {
    margin: calc(var(--pad) * -1) calc(var(--pad) * -1) var(--pad);
    aspect-ratio: 16 / 9; position: relative; overflow: hidden;
    max-height: 340px;
    background: linear-gradient(160deg, #10203c, #070d1a);
}
/* 15.09.: Das Material ist NICHT 16/9. Die Weltbilder messen 2.07:1, das
   Kampfvideo nach dem Wegschneiden der schwarzen Balken 2.08:1 (ffmpeg
   cropdetect: 1920x924 statt 1920x1080 — die Balken steckten im Mitschnitt).
   Bei 16/9 haette object-fit: cover 15 % der Bildbreite abgeschnitten. Mit
   2.05:1 sieht man fast das ganze Bild, und die Kachel wird dabei sogar
   flacher (272px statt 314px Bildhoehe bei 558px Kachelbreite). */
.v2-tile.big .v2-tile-media { aspect-ratio: 2.05 / 1; }
/* 15.09. gemessen: 16/9 ueber die volle Bentobreite (1134px) ergibt 638px
   Bildhoehe, die Kachel wird 808px hoch, also ein dunkles Loch. Die breite
   Kachel laeuft darum flacher als 16/9. 2.6:1 statt 32/9 (3.56:1), weil die
   Weltbilder selbst 2.07:1 sind: bei 32/9 haette object-fit: cover 42 % der
   Bildhoehe weggeschnitten, bei 2.6:1 sind es 20 %. */
.v2-tile.wide .v2-tile-media { aspect-ratio: 2.6 / 1; max-height: 440px; }

/* ── Diaschau (breite Kachel) ────────────────────────────────────────────────
   Alle Bilder liegen uebereinander, nur das mit .on ist sichtbar. Das erste
   steht im HTML, die uebrigen haengt site.js erst an, wenn die Kachel in Sicht
   kommt — so laedt niemand 620 KB Weltbilder, der gar nicht so weit scrollt. */
.v2-show { position: absolute; inset: 0; }
.v2-show img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; display: block;
    opacity: 0; transition: opacity .9s ease;
}
.v2-show img.on { opacity: 1; }
.v2-tile:hover .v2-show img.on { transform: scale(1.04); }
.v2-show img { transition: opacity .9s ease, transform .6s cubic-bezier(.2, .8, .3, 1); }

/* ── Bedienung: Pfeile und Punkte (15.09., Sven) ────────────────────────────
   Beides sind echte <button>. Sie liegen ueber den Bildern und tragen darum
   z-index 4; die Bilder selbst bekommen keinen Klick mehr, sonst wuerde jeder
   Griff zum Pfeil zugleich weiterschalten. */
.v2-show-arr {
    position: absolute; z-index: 4; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    background: rgba(6, 12, 24, .55);
    backdrop-filter: blur(6px);
    color: #fff; cursor: pointer;
    /* Ruhezustand: unsichtbar, aber anklickbar bleiben sie erst beim
       Ueberfahren der Kachel. Auf Touch-Geraeten (kein Hover) stehen sie
       dauerhaft da, siehe Regel weiter unten. */
    opacity: 0; transition: opacity .2s, background .2s, border-color .2s, transform .2s;
}
.v2-show-arr.prev { left: 14px; }
.v2-show-arr.next { right: 14px; }
/* Der Pfeil selbst: zwei gedrehte Kanten, kein Bild noetig */
.v2-show-arr span {
    display: block; width: 11px; height: 11px;
    border-top: 2px solid currentColor; border-right: 2px solid currentColor;
}
.v2-show-arr.prev span { transform: rotate(-135deg); margin-left: 4px; }
.v2-show-arr.next span { transform: rotate(45deg);   margin-right: 4px; }

.v2-tile.wide:hover .v2-show-arr,
.v2-show-arr:focus-visible { opacity: 1; }
.v2-show-arr:hover { background: rgba(12, 24, 44, .85); border-color: var(--cy); }
.v2-show-arr:active { transform: translateY(-50%) scale(.92); }
.v2-show-arr:focus-visible { outline: 2px solid var(--cy); outline-offset: 2px; }

/* Punkte zeigen, wie viele Bilder es sind und wo man gerade ist.
   Der Knopf ist bewusst groesser als der sichtbare Punkt (::after), damit man
   ihn auch mit dem Finger trifft: 6px Punkt in einer 20px hohen Flaeche. */
.v2-show-dots {
    position: absolute; z-index: 4; left: 0; right: 0; bottom: 8px;
    display: flex; justify-content: center; gap: 3px;
}
.v2-show-dot {
    width: 16px; height: 20px; padding: 0;
    border: 0; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.v2-show-dot::after {
    content: ""; display: block;
    width: 6px; height: 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .32);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    transition: background .3s, width .3s;
}
.v2-show-dot.on::after { width: 18px; background: var(--cy); }
.v2-show-dot:hover::after { background: rgba(255, 255, 255, .7); }
.v2-show-dot:focus-visible { outline: 2px solid var(--cy); outline-offset: 1px; border-radius: 6px; }

/* Geraete ohne Maus: Pfeile dauerhaft zeigen, sonst kaeme man nie dran. */
@media (hover: none) {
    .v2-show-arr { opacity: 1; }
}

/* ── Video-Kachel ────────────────────────────────────────────────────────────
   Bis site.js das src setzt, sieht man nur das poster-Bild. Deshalb steht hier
   dieselbe Darstellung wie bei einem Standbild. */
.v2-clip {
    width: 100%; height: 100%; object-fit: cover; display: block;
    background: #070d1a;
}
@media (prefers-reduced-motion: reduce) {
    .v2-show img { transition: none; }
}
.v2-tile-media img, .v2-tile-media video {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s cubic-bezier(.2, .8, .3, 1);
}
.v2-tile:hover .v2-tile-media img { transform: scale(1.05); }
.v2-tile-media::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(8, 14, 28, .85));
}
/* Platzhalter, solange kein Bild hinterlegt ist */
.v2-ph {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px;
    color: var(--ink3); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
    background-image:
        repeating-linear-gradient(45deg, rgba(95, 230, 255, .045) 0 12px, transparent 12px 24px);
}
.v2-ph img { width: 40px !important; height: 40px !important; object-fit: contain !important; opacity: .5; image-rendering: pixelated; }

.v2-tile-ico {
    width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(150deg, rgba(var(--cy-rgb), .2), rgba(var(--cy-rgb), .05));
    border: 1px solid rgba(var(--cy-rgb), .25);
    margin-bottom: 14px;
}
.v2-tile-ico img { width: 26px; height: 26px; image-rendering: pixelated; }
.v2-tile h3 { font-size: clamp(17px, 2vw, 21px); margin-bottom: 9px; letter-spacing: -.2px; }
.v2-tile p { color: var(--ink2); font-size: 14.5px; line-height: 1.65; }

/* ── "Mehr" — kurz zuerst, lang auf Wunsch ───────────────────────────────── */
.v2-more { margin-top: auto; padding-top: 14px; }
.v2-more > summary {
    display: inline-flex; align-items: center; gap: 7px;
    list-style: none; cursor: pointer;
    font-size: 13px; font-weight: 800; letter-spacing: .4px;
    color: var(--cy); padding: 7px 0;
    transition: color .15s;
}
.v2-more > summary::-webkit-details-marker { display: none; }
.v2-more > summary::after {
    content: ""; width: 7px; height: 7px; margin-left: 1px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .2s;
}
.v2-more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.v2-more > summary:hover { color: #fff; }
.v2-more-body {
    color: var(--ink3); font-size: 13.8px; line-height: 1.7;
    padding-top: 4px; animation: v2Open .28s ease-out;
}
@keyframes v2Open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── BitMonz-Band (Teaser zur Pedia) ─────────────────────────────────────── */
.v2-strip { position: relative; overflow: hidden; padding: 6px 0 4px; }
.v2-strip-track { display: flex; gap: 16px; width: max-content; animation: v2Scroll 46s linear infinite; }
.v2-strip:hover .v2-strip-track { animation-play-state: paused; }
@keyframes v2Scroll { to { transform: translateX(-50%); } }
.v2-chip-mon {
    width: 132px; flex-shrink: 0; border-radius: var(--r-s); overflow: hidden;
    background: #0a1428; border: 1px solid rgba(var(--cy-rgb), .14);
    text-align: center; padding-bottom: 10px;
    transition: transform .18s, border-color .18s;
}
.v2-chip-mon:hover { transform: translateY(-5px); border-color: var(--cy); }
.v2-chip-mon .st { height: 104px; position: relative; background-size: cover; background-position: center; display: flex; align-items: flex-end; justify-content: center; }
.v2-chip-mon .st img { width: 78px; height: 78px; object-fit: contain; image-rendering: pixelated; margin-bottom: 6px; }
.v2-chip-mon b { display: block; font-size: 13px; margin-top: 8px; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .v2-strip-track { animation: none; } }

/* ── Testkey ─────────────────────────────────────────────────────────────── */
.v2-key {
    position: relative; overflow: hidden;
    border-radius: clamp(18px, 3vw, 28px);
    padding: clamp(30px, 5vw, 54px);
    background:
        radial-gradient(80% 120% at 85% 10%, rgba(255, 179, 71, .18), transparent 60%),
        linear-gradient(150deg, rgba(30, 48, 90, .75), rgba(10, 17, 32, .8));
    border: 1px solid rgba(255, 179, 71, .26);
    display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px); align-items: center;
}
@media (max-width: 860px) { .v2-key { grid-template-columns: 1fr; } }
.v2-key h2 { font-size: clamp(23px, 3.4vw, 34px); line-height: 1.15; margin-bottom: 12px; }
.v2-key h2 em { font-style: normal; color: var(--warm); }
.v2-key > div > p { color: var(--ink2); font-size: 15px; line-height: 1.65; }
.v2-key-list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.v2-key-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink2); font-size: 14px; line-height: 1.55; }
.v2-key-list li::before {
    content: "✓"; flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--warm-soft); color: var(--warm);
    font-size: 12px; font-weight: 900;
}

.v2-form { display: grid; gap: 12px; }
.v2-form label { font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--ink3); display: block; margin-bottom: 6px; }
.v2-form input, .v2-form select, .v2-form textarea {
    width: 100%; padding: 13px 15px; border-radius: var(--r-s);
    background: rgba(6, 12, 24, .75);
    border: 1px solid rgba(var(--cy-rgb), .18);
    color: var(--ink); font-family: inherit; font-size: 14.5px;
    transition: border-color .15s, box-shadow .15s;
}
.v2-form textarea { min-height: 84px; resize: vertical; line-height: 1.6; }
.v2-form input:focus, .v2-form select:focus, .v2-form textarea:focus {
    outline: none; border-color: var(--warm); box-shadow: 0 0 0 3px rgba(255, 179, 71, .14);
}
.v2-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .v2-form .row2 { grid-template-columns: 1fr; } }
.v2-form .hp { position: absolute; left: -9999px; opacity: 0; }
.v2-form-note { color: var(--ink3); font-size: 11.5px; line-height: 1.55; }
.v2-form-msg { font-size: 13.5px; font-weight: 700; min-height: 20px; }
.v2-form-msg.ok { color: var(--ok); }
.v2-form-msg.err { color: var(--bad); }

/* ═══════════════════════════════════════════════════════════════════════════
   BITMONPEDIA — nur noch BitMonz, dafuer richtig
   Sven: "Nehme die Item-Uebersicht erstmal raus, nur wirklich die Moeglichkeit
   die BitMonz zu sehen. Auch da muss es mehr nach einem Game aussehen."
   ═══════════════════════════════════════════════════════════════════════════ */

.v2-pedia-hero {
    position: relative; overflow: hidden; text-align: center;
    padding: clamp(110px, 14vw, 150px) 22px clamp(34px, 5vw, 52px);
}
.v2-pedia-hero .v2-hero-bg { opacity: .9; }
.v2-pedia-hero h1 { position: relative; z-index: 2; font-size: clamp(30px, 5vw, 50px); letter-spacing: -1px; }
.v2-pedia-hero h1 em { font-style: normal; background: linear-gradient(100deg, var(--cy), var(--warm)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v2-pedia-hero p { position: relative; z-index: 2; color: var(--ink2); margin: 14px auto 0; max-width: 560px; font-size: 15.5px; line-height: 1.6; }
.v2-pedia-count { position: relative; z-index: 2; margin-top: 18px; color: var(--ink3); font-size: 13px; }
.v2-pedia-count b { color: var(--cy); font-size: 17px; font-weight: 800; }

/* Element-Filter als Chips mit Icon statt als Auswahlfeld */
.v2-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 auto 26px; max-width: 900px; }
.v2-fchip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px; border-radius: 999px; cursor: pointer;
    font-family: inherit; font-size: 13px; font-weight: 700;
    background: rgba(13, 24, 44, .8); color: var(--ink3);
    border: 1px solid rgba(var(--cy-rgb), .14);
    transition: transform .15s, border-color .15s, color .15s, background .15s;
}
.v2-fchip img { width: 17px; height: 17px; image-rendering: pixelated; }
.v2-fchip .dot { width: 9px; height: 9px; border-radius: 50%; }
.v2-fchip:hover { color: var(--ink); transform: translateY(-2px); border-color: rgba(var(--cy-rgb), .45); }
.v2-fchip.on { color: #fff; border-color: var(--cy); background: rgba(var(--cy-rgb), .16); box-shadow: 0 0 16px rgba(var(--cy-rgb), .2); }
.v2-fchip span.n { opacity: .55; font-size: 11.5px; }

.v2-search {
    /* 16.09.: margin-top statt 0 — die Sektion darunter beginnt mit
       padding-top:0 direkt an der Unterkante des Pedia-Heros, die Suche
       klebte also ohne jeden Abstand an der Kante. */
    display: block; width: min(420px, 100%); margin: clamp(26px, 4vw, 40px) auto 20px;
    padding: 13px 18px; border-radius: 999px;
    background: rgba(6, 12, 24, .8); border: 1px solid rgba(var(--cy-rgb), .18);
    color: var(--ink); font-family: inherit; font-size: 14.5px; text-align: center;
}
.v2-search:focus { outline: none; border-color: var(--cy); box-shadow: 0 0 0 3px rgba(var(--cy-rgb), .13); }

/* Die Karte: gross, mit dem Spiel-Hintergrund und atmendem Sprite */
.v2-mons { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 18px; }
.v2-mon {
    position: relative; overflow: hidden; cursor: pointer;
    border-radius: var(--r); border: 1px solid rgba(var(--cy-rgb), .13);
    background: #0a1428; text-align: left;
    font-family: inherit; color: inherit; padding: 0; display: block; width: 100%;
    transition: transform .22s cubic-bezier(.3, 1.2, .5, 1), border-color .22s, box-shadow .22s;
}
.v2-mon:hover {
    transform: translateY(-7px) scale(1.015);
    border-color: var(--cy);
    box-shadow: 0 20px 48px rgba(0, 0, 0, .55), 0 0 26px rgba(var(--cy-rgb), .2);
}
.v2-mon-stage {
    position: relative; aspect-ratio: 1 / .82; overflow: hidden;
    background: #0d1930 center/cover no-repeat;
    display: flex; align-items: flex-end; justify-content: center;
}
.v2-mon-stage::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(4, 9, 20, .18) 0%, transparent 34%, rgba(4, 9, 20, .82) 100%);
}
.v2-mon-sprite {
    position: relative; z-index: 1;
    width: 62%; max-height: 82%; object-fit: contain; image-rendering: pixelated;
    margin-bottom: 8%;
    filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6));
    animation: v2Breathe 3.4s ease-in-out infinite;
    transition: transform .25s;
}
@keyframes v2Breathe { 0%, 100% { transform: scaleY(1) translateY(0); } 50% { transform: scaleY(1.035) translateY(-3px); } }
.v2-mon:hover .v2-mon-sprite { transform: scale(1.08) translateY(-4px); }

.v2-mon-eles { position: absolute; z-index: 2; top: 10px; left: 10px; display: flex; gap: 5px; }
.v2-mon-eles img, .v2-mon-eles i {
    width: 24px; height: 24px; border-radius: 8px; display: block;
    background: rgba(5, 10, 20, .8); padding: 3px; image-rendering: pixelated;
    border: 1px solid rgba(255, 255, 255, .13);
}
.v2-mon-eles i { padding: 0; }

/* 15.09.: display:block ist Pflicht. Die Karte ist ein <button>, darum sind
   Buehne und Fuss <span> (ein <div> im Button waere ungueltiges HTML). Ein
   inline-span ignoriert padding fuer das Layout, das <h3> darin rutschte an
   die Kartenkante und wurde vom overflow:hidden angeschnitten. */
/* 16.09. (Sven: "innen unten immer ein Abstand vom Bild zum unteren Rand"): der
   Fuss liegt jetzt absolut UEBER dem unteren Bildrand statt darunter, die Karte
   endet also genau mit dem Bild. Lesbar bleibt er durch den Verlauf der Buehne. */
.v2-mon-foot { display: block; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: 0 15px 14px; }
.v2-mon-foot h3 { font-size: 17px; letter-spacing: -.2px; text-shadow: 0 2px 8px rgba(0, 0, 0, .9); }
.v2-mon-foot .el { margin-top: 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; color: var(--ink3); text-transform: uppercase; }
.v2-mon-hint {
    position: absolute; z-index: 3; right: 12px; bottom: 14px;
    font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--cy);
    opacity: 0; transform: translateY(5px); transition: opacity .2s, transform .2s;
}
.v2-mon:hover .v2-mon-hint { opacity: 1; transform: none; }

.v2-empty { text-align: center; color: var(--ink3); padding: 60px 20px; font-size: 14px; }

/* ── Detail-Fenster ──────────────────────────────────────────────────────── */
.v2-modal {
    position: fixed; inset: 0; z-index: 900; display: none;
    align-items: center; justify-content: center; padding: 22px;
    background: rgba(4, 8, 18, .78); backdrop-filter: blur(7px);
    animation: v2Fade .2s ease-out;
}
.v2-modal.on { display: flex; }
@keyframes v2Fade { from { opacity: 0; } to { opacity: 1; } }
.v2-modal-box {
    width: min(820px, 100%); max-height: min(88vh, 720px); overflow: hidden;
    border-radius: clamp(16px, 2.5vw, 24px);
    background: linear-gradient(160deg, #142545, #080f1e);
    border: 1px solid rgba(var(--cy-rgb), .3);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .7), 0 0 40px rgba(var(--cy-rgb), .12);
    display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    animation: v2Pop .3s cubic-bezier(.2, 1.3, .5, 1);
}
@keyframes v2Pop { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) { .v2-modal-box { grid-template-columns: 1fr; overflow-y: auto; } }
/* Einspaltig, z.B. das Kontakt-Modal (16.09.) */
.v2-modal-box.single { grid-template-columns: 1fr; width: min(640px, 100%); max-height: min(92vh, 860px); overflow-y: auto; }
.v2-modal-box.single .v2-modal-body { padding: clamp(24px, 4vw, 36px); }
.v2-modal-box.single .v2-modal-body h2 { margin-top: 6px; }
.v2-modal-contact .bm-form-msg:empty { display: none; }
/* Kampfrolle im Detailfenster (16.09.): Farbe aus js/bitmon_role.js per --role */
.v2-role {
    display: inline-flex; align-items: center; gap: 7px; margin: -6px 0 16px;
    padding: 5px 12px 5px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .4px;
    color: var(--role, var(--cy)); background: rgba(4, 9, 20, .55); border: 1px solid var(--role, var(--cy));
}
.v2-role img { width: 18px; height: 18px; image-rendering: pixelated; }
.v2-role small { font-weight: 600; color: var(--ink3); letter-spacing: .6px; text-transform: uppercase; font-size: 10px; margin-left: 2px; }
.v2-role[hidden] { display: none; }

.v2-modal-stage {
    position: relative; background: #0d1930 center/cover no-repeat;
    display: flex; align-items: center; justify-content: center; min-height: 260px;
}
.v2-modal-stage img.big {
    width: 76%; max-height: 74%; object-fit: contain; image-rendering: pixelated;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .65));
    animation: v2Breathe 3.4s ease-in-out infinite;
}
.v2-modal-stage::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 60%, rgba(8, 15, 30, .6));
    pointer-events: none;
}
.v2-modal-body { padding: clamp(22px, 3vw, 32px); overflow-y: auto; }
.v2-modal-body h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.5px; margin-bottom: 10px; }
.v2-modal-eles { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.v2-ele-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px 5px 6px; border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: .4px;
}
.v2-ele-badge img { width: 18px; height: 18px; image-rendering: pixelated; }
.v2-modal-desc { color: var(--ink2); font-size: 14.5px; line-height: 1.75; }

.v2-stats { margin-top: 22px; display: grid; gap: 11px; }
.v2-stat-row { display: grid; grid-template-columns: 96px 1fr 42px; gap: 11px; align-items: center; font-size: 12px; } /* 96px: "Intelligenz" passt (16.09.) */
.v2-stat-row .k { color: var(--ink3); font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.v2-stat-row .v { color: var(--ink); font-weight: 800; text-align: right; }
.v2-stat-bar { height: 8px; border-radius: 99px; background: rgba(4, 9, 20, .8); overflow: hidden; }
.v2-stat-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3d8bff, var(--cy)); animation: v2Grow .6s cubic-bezier(.2, .9, .3, 1); }
.v2-stat-bar.hp i { background: linear-gradient(90deg, #25b862, #57e58c); }
.v2-stat-bar.mp i { background: linear-gradient(90deg, #2f6fe0, #6cc4ff); }
@keyframes v2Grow { from { width: 0 !important; } }

.v2-modal-close {
    position: absolute; top: 12px; right: 12px; z-index: 5;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(6, 12, 24, .85); color: var(--ink2);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 16px; cursor: pointer; font-family: inherit;
    transition: color .15s, border-color .15s, transform .15s;
}
.v2-modal-close:hover { color: #fff; border-color: var(--cy); transform: rotate(90deg); }

/* ── Bewegung aus, wenn der Besucher das so eingestellt hat ──────────────── */
@media (prefers-reduced-motion: reduce) {
    .v2-hero-logo, .v2-hero-mons img, .v2-mon-sprite, .v2-modal-stage img.big { animation: none; }
}