/* =========================================================================
   Damoria - neue externe Startseite (ausgeloggt).
   Mittelalter-Look der eingeloggten Weltenauswahl (startpage_portal.css):
   Samt-Rot, Goldfassungen, MedievalSharp-Stickschrift mit Goldrot-Verlauf,
   Burgmauer/Turm-Deko. Aufbau nach der SpaceInvasion-Startseite (start_new.css).
   Alle Klassen tragen das Praefix .dpn- (Damoria Portal New).
   ========================================================================= */

@font-face {
    font-family: 'MedievalSharp';
    src: url('/css/fonts/medievalsharp.woff2?v=1') format('woff2');
    font-weight: 400;
    font-display: swap;
}

:root{
    --dpn-bg:          #120a06;
    --dpn-panel:       rgba(36, 21, 12, 0.74);
    --dpn-panel-2:     rgba(52, 26, 14, 0.62);
    --dpn-panel-solid: #1c1108;
    --dpn-velvet:      linear-gradient(180deg, #6e1a12 0%, #4d120c 55%, #35090a 100%);
    --dpn-border:      rgba(232, 197, 106, 0.28);
    --dpn-border-soft: rgba(232, 197, 106, 0.14);
    --dpn-gold:        #e8c56a;
    --dpn-gold-2:      #caa24a;
    --dpn-gold-dark:   #6d5220;
    --dpn-gold-light:  #f0dc9e;
    --dpn-red:         #c2392e;
    --dpn-red-dark:    #7a1f16;
    --dpn-text:        #f3e9d2;
    --dpn-dim:         #b9a98a;
    --dpn-glow:        0 0 6px rgba(232,197,106,.45), 0 0 16px rgba(232,197,106,.22);
    --dpn-red-glow:    0 0 10px rgba(194,57,46,.55);
    --dpn-stripe:      linear-gradient(90deg, #6d5220 0%, #caa24a 22%, #f0dc9e 50%, #caa24a 78%, #6d5220 100%);
    --dpn-goldtext:    linear-gradient(180deg, #ffe9b0 0%, #eec66c 45%, #d98a3a 78%, #c86a2a 100%);
    --dpn-serif:       'MedievalSharp', Georgia, 'Times New Roman', serif;
    --dpn-body:        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing: border-box; }

html, body{
    margin:0; padding:0;
    background: var(--dpn-bg);
    color: var(--dpn-text);
    font-family: var(--dpn-body);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.dpn-page{ position: relative; min-height: 100vh; overflow-x: hidden; }

a{ color: var(--dpn-gold); text-decoration: none; }
a:hover{ color: #fff; }

/* ---------- Hintergrundvideo (Ritter + Burg) ---------- */
.dpn-bg{
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
    background: #000 url('/include/sp_image.jpg') center top / cover no-repeat;
}
.dpn-bg video{
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center top; opacity: 0; transition: opacity 1.2s ease;
}
.dpn-bg.dpn-bg-ready video{ opacity: 1; }
/* Lesbarkeit: Ritter links und Burg rechts bleiben sichtbar, Mitte/Unten dunkler */
.dpn-bg:after{
    content:""; position:absolute; inset:0;
    background:
        radial-gradient(70% 80% at 50% 48%, rgba(18,10,6,.30) 0%, rgba(18,10,6,.62) 60%, rgba(18,10,6,.86) 100%),
        linear-gradient(180deg, rgba(18,10,6,.62) 0%, rgba(18,10,6,.12) 28%, rgba(18,10,6,.25) 70%, rgba(18,10,6,.95) 100%);
}
/* Scroll-Abdunklung: der Hero bleibt hell, tiefer wird es Samt-dunkel */
.dpn-scrim{
    position: fixed; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(100% 60% at 50% 0%, #1d0d08, #0f0705 70%); opacity: 0; transition: opacity .15s linear;
}

/* ---------- Layout ---------- */
.dpn-wrap{ position: relative; z-index: 2; }
.dpn-container{ max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.dpn-section{ position: relative; padding: 78px 0; }
.dpn-section + .dpn-section{ border-top: 1px solid rgba(232,197,106,.08); }
.dpn-section-dark{ background: linear-gradient(180deg, rgba(10,5,3,.55), rgba(10,5,3,.85)); }
.dpn-section-velvet{
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(120,30,20,.28), transparent 60%),
        linear-gradient(180deg, rgba(26,8,6,.70), rgba(14,5,4,.88));
}

/* Zierleiste: Goldlinie mit Raute in der Mitte */
.dpn-orn{ display:flex; align-items:center; justify-content:center; gap:14px; margin: 0 auto 26px; max-width: 520px; }
.dpn-orn:before, .dpn-orn:after{ content:""; flex:1; height:1px; background: linear-gradient(90deg, transparent, var(--dpn-gold-2), transparent); }
.dpn-orn i{ width:9px; height:9px; transform: rotate(45deg); background: var(--dpn-gold); box-shadow: var(--dpn-glow); }
.dpn-orn-left{ margin-left: 0; justify-content:flex-start; }
.dpn-orn-left:before{ display:none; }

.dpn-eyebrow{
    display:inline-block; font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--dpn-gold); margin-bottom: 12px; font-weight: 700; font-family: var(--dpn-body);
    text-shadow: 0 1px 0 #2a1004;
}
.dpn-h2{
    font-family: var(--dpn-serif); font-size: 36px; margin: 0 0 12px; font-weight: 400; letter-spacing: .5px; line-height: 1.12;
    background-image: var(--dpn-goldtext); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1px 0 rgba(30,8,2,.95)) drop-shadow(0 4px 12px rgba(0,0,0,.65));
}
.dpn-sub{ color: var(--dpn-dim); margin: 0 0 38px; max-width: 660px; font-size: 15.5px; }
.dpn-center{ text-align: center; }
.dpn-center .dpn-sub{ margin-left:auto; margin-right:auto; }

/* ---------- Topbar (rote Samtleiste mit goldener Unterkante) ---------- */
.dpn-nav{
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 12px 28px; min-height: 64px;
    background: linear-gradient(180deg, rgba(40,8,5,.82), rgba(40,8,5,0));
    transition: background .3s ease, box-shadow .3s ease;
}
.dpn-nav:after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px; opacity:0; transition: opacity .3s ease;
    background: var(--dpn-stripe);
}
.dpn-nav.dpn-nav-solid{
    background: linear-gradient(180deg, rgba(84,16,11,.96) 0%, rgba(58,12,8,.95) 60%, rgba(30,6,4,.97) 100%);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(0,0,0,.6);
}
.dpn-nav.dpn-nav-solid:after{ opacity: 1; }

.dpn-brand{ position: absolute; left: 22px; top: 6px; line-height: 0; z-index: 2; display:flex; align-items:center; gap:10px; }
.dpn-brand img{ height: 52px; display: block; filter: drop-shadow(0 4px 12px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(232,197,106,.25)); transition: height .3s ease; }
.dpn-brand span{
    font-family: var(--dpn-serif); font-size: 22px; line-height: 1;
    background-image: var(--dpn-goldtext); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1px 0 rgba(30,8,2,.95)) drop-shadow(0 0 6px rgba(0,0,0,.8));
}

.dpn-nav-links{ display:flex; align-items:center; gap: 24px; }
.dpn-nav-links > a{
    font-family: var(--dpn-serif); color: #e9d9b0; font-size: 15px; letter-spacing: .6px;
    text-shadow: 0 1px 0 #2a1004, 0 0 6px rgba(0,0,0,.7);
}
.dpn-nav-links > a:hover{ color:#fff; text-shadow: var(--dpn-glow); }
.dpn-nav-flag{ height:16px; border-radius:2px; box-shadow:0 0 3px #000; vertical-align:middle; }

/* ---------- Buttons ---------- */
.dpn-btn{
    position: relative;
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 13px 28px; border-radius: 6px; cursor: pointer;
    font-family: var(--dpn-serif); font-size: 17px; letter-spacing: .6px;
    color: #ffe9b0; text-decoration: none;
    background: linear-gradient(180deg, #c8462f 0%, #9a2c1d 55%, #7a1f16 100%);
    border: 1px solid #d4553f;
    box-shadow: 0 0 0 1px rgba(20,4,2,.9), inset 0 1px 0 rgba(255,220,160,.35), 0 8px 24px rgba(0,0,0,.5), 0 0 14px rgba(194,57,46,.35);
    text-shadow: 0 1px 0 #3a0a06;
    transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.dpn-btn:hover{ color:#fff; transform: translateY(-2px); filter: brightness(1.08);
    box-shadow: 0 0 0 1px #e8c56a, inset 0 1px 0 rgba(255,220,160,.45), 0 10px 28px rgba(0,0,0,.55), 0 0 22px rgba(232,197,106,.45); }
.dpn-btn-lg{ padding: 17px 40px; font-size: 20px; }
.dpn-btn-ghost{
    background: rgba(30,10,6,.55); color: var(--dpn-text);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    border: 1px solid var(--dpn-border); box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.dpn-btn-ghost:hover{ color:#fff; background: rgba(50,16,10,.7); border-color: var(--dpn-gold); box-shadow: var(--dpn-glow), 0 6px 20px rgba(0,0,0,.4); }

/* gold gefasster Knopf mit Glanzlauf (Haupt-CTA) */
.dpn-cta{ overflow:hidden; border: 2px solid #a5813a; animation: dpn-cta-pulse 3s ease-in-out infinite; }
.dpn-cta::before{
    content:""; position:absolute; top:0; left:-60%; width:45%; height:100%; z-index:1;
    background:linear-gradient(100deg, transparent, rgba(255,240,200,.45), transparent);
    transform:skewX(-20deg); animation:dpn-shine 3.4s ease-in-out infinite; pointer-events:none;
}
.dpn-cta > span{ position: relative; z-index: 2; }
@keyframes dpn-shine{ 0%{ left:-60%; } 55%,100%{ left:130%; } }
@keyframes dpn-cta-pulse{
    0%,100%{ box-shadow: 0 0 0 1px rgba(20,4,2,.9), inset 0 1px 0 rgba(255,220,160,.35), 0 8px 24px rgba(0,0,0,.5), 0 0 14px rgba(232,197,106,.25); }
    50%{ box-shadow: 0 0 0 1px rgba(20,4,2,.9), inset 0 1px 0 rgba(255,220,160,.45), 0 10px 28px rgba(0,0,0,.55), 0 0 28px rgba(232,197,106,.6), 0 0 48px rgba(232,197,106,.25); }
}

/* ---------- Hero ---------- */
.dpn-hero{
    position: relative; z-index: 2;
    min-height: 100vh; display: flex; align-items: flex-start;
    padding: 118px 0 70px;
}
.dpn-hero-grid{
    display: grid; grid-template-columns: minmax(0, 560px) 360px; justify-content: space-between; gap: 48px; align-items: start; width:100%;
}
.dpn-hero-left h1{
    font-family: var(--dpn-serif); font-weight: 400;
    font-size: 46px; line-height: 1.08; margin: 0 0 16px;
}
.dpn-h1-top{ display:block; font-size: .5em; letter-spacing: 2px; text-transform: uppercase; color: #efe1bf; margin-bottom: 6px;
    text-shadow: 0 1px 0 #2a1004, 0 2px 18px rgba(0,0,0,.9); }
.dpn-grad{
    display:block;
    background-image: var(--dpn-goldtext); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1px 0 rgba(30,8,2,.95)) drop-shadow(0 6px 16px rgba(0,0,0,.75));
}
.dpn-hero-tag{ font-size: 17.5px; color: #e6d9bd; max-width: 520px; margin: 0 0 22px; text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.dpn-hero-play{ display:flex; justify-content:flex-start; margin: 0 0 22px; }
.dpn-hero-play .dpn-btn{ min-width: 300px; }

/* Zahlen unter dem Knopf */
.dpn-stats{ display:flex; gap: 12px; margin: 0 0 26px; flex-wrap: wrap; }
.dpn-stat{ display:flex; flex-direction:column; flex: 1 1 auto; padding: 6px 12px 6px 11px; border-left: 2px solid var(--dpn-gold-2);
    background: linear-gradient(90deg, rgba(30,10,6,.55), transparent); white-space: nowrap; }
.dpn-stat b{ font-family: var(--dpn-serif); font-size: 22px; font-weight: 400; color:#fff; text-shadow: var(--dpn-glow); line-height: 1.1; }
.dpn-stat span{ font-size: 10px; color: var(--dpn-dim); text-transform: uppercase; letter-spacing: 1.2px; }

/* neuester Forenbeitrag im Hero */
.dpn-hero-news{
    display:block; margin-top:4px; max-width:560px;
    padding:16px 18px; border-radius:6px; text-decoration:none; position:relative; overflow:hidden;
    background: rgba(30,10,6,.62); border:1px solid var(--dpn-border);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transition: border-color .2s ease, transform .15s ease;
}
.dpn-hero-news:hover{ border-color: var(--dpn-gold); transform: translateY(-2px); }
.dpn-hero-news-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.dpn-hero-news-tag{
    flex:0 0 auto; font-size:10px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase;
    color:#ffe9b0; background: linear-gradient(180deg, #b8402f, #8a2a1d); border:1px solid #d4553f; padding:4px 9px; border-radius:4px;
}
.dpn-hero-news-title{ flex:1; min-width:0; color:#fff; font-family: var(--dpn-serif); font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dpn-hero-news-date{ flex:0 0 auto; color: var(--dpn-dim); font-size:11px; }
.dpn-hero-news-body{ display:flex; gap:14px; align-items:flex-start; }
.dpn-hero-news-img{ flex:0 0 96px; width:96px; height:64px; border-radius:4px; object-fit:cover; border:1px solid var(--dpn-border-soft); }
.dpn-hero-news-text{
    margin:0; color: var(--dpn-dim); font-size:13px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.dpn-hero-quick{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.dpn-hero-quick a{ display:inline-flex; align-items:center; font-family: var(--dpn-serif); font-size:14px; color:#efe1bf;
    padding:8px 16px; border-radius:5px; background:rgba(30,10,6,.55); border:1px solid var(--dpn-border);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .15s ease, border-color .2s ease, box-shadow .25s ease; }
.dpn-hero-quick a:hover{ color:#fff; border-color:var(--dpn-gold); box-shadow:var(--dpn-glow); transform:translateY(-2px); }

/* ---------- Login-Kasten: Samt mit Goldfassung ---------- */
.dpn-auth{
    position: relative;
    background: linear-gradient(180deg, rgba(48,14,9,.86), rgba(26,8,6,.9));
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 2px solid #a5813a; border-radius: 8px; padding: 26px 22px 22px;
    box-shadow: 0 0 0 1px rgba(20,4,2,.9), inset 0 0 0 1px rgba(240,220,158,.18), 0 24px 60px rgba(0,0,0,.65), inset 0 0 60px rgba(120,30,20,.18);
}
.dpn-auth:before{
    content:""; position:absolute; left:14px; right:14px; top:-2px; height:2px; background: var(--dpn-stripe);
}
.dpn-auth-title{
    text-align:center; margin: 0 0 16px; font-family: var(--dpn-serif); font-weight: 400; font-size: 24px; line-height: 1.15;
    background-image: var(--dpn-goldtext); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1px 0 rgba(30,8,2,.95)) drop-shadow(0 2px 10px rgba(0,0,0,.8));
}
#bitmeup-login{ min-height: 0; }

.dpn-auth-or{
    display:flex; align-items:center; gap:12px; color: var(--dpn-dim);
    font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin: 18px 0 14px;
}
.dpn-auth-or:before, .dpn-auth-or:after{ content:""; flex:1; height:1px; background: linear-gradient(90deg, transparent, rgba(232,197,106,.45), transparent); }

.dpn-sso-list{ display:flex; flex-direction: column; gap: 9px; }
.dpn-sso-row{ display:flex; gap:9px; }
.dpn-sso-row .dpn-sso{ flex:1; min-width:0; }
.dpn-sso{
    display:flex; align-items: stretch; min-height: 42px; border-radius: 6px; overflow: hidden;
    color:#fff; font-weight: 700; font-size: 14px; text-decoration: none;
    border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
    transition: transform .15s ease, box-shadow .25s ease, filter .2s ease;
}
.dpn-sso:hover{ transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 10px 26px rgba(0,0,0,.4); color:#fff; }
.dpn-sso-ic{ flex: 0 0 40px; width: 40px; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,.22); }
.dpn-sso-ic img{ width: 26px; height: 26px; object-fit: contain; display:block; }
.dpn-sso-ic svg{ display:block; }
.dpn-sso-tx{ flex:1; display:flex; align-items:center; justify-content:center; padding: 0 8px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dpn-sso-google{ background:#fff; color:#1f2937; border-color: rgba(0,0,0,.12); }
.dpn-sso-google .dpn-sso-ic{ background:#fff; }
.dpn-sso-google:hover{ color:#1f2937; }
.dpn-sso-fb{ background:#1877F2; }
.dpn-sso-steam{ background: linear-gradient(135deg,#2a475e,#1b2838); }
.dpn-sso-steam .dpn-sso-ic img{ width:30px; height:30px; }
.dpn-sso-discord{ background: linear-gradient(135deg,#5865F2,#404EED); border-color: rgba(255,255,255,.2); font-size: 16px; }
.dpn-sso-wide{ min-height: 58px; padding-right: 8px; }
.dpn-sso-wide .dpn-sso-ic{ flex-basis: 62px; width:62px; background: rgba(0,0,0,.18); }

.dpn-auth-reg{ margin-top: 16px; text-align:center; font-size: 13px; color: var(--dpn-dim); }
.dpn-auth-reg a{ font-family: var(--dpn-serif); font-size: 15px; }

.dpn-auth-bmu{ display:flex; align-items:center; justify-content:center; gap:9px;
    margin:16px -22px -22px; padding:12px 16px; border-radius:0 0 6px 6px;
    background:linear-gradient(to top, rgba(10,3,2,.92), rgba(10,3,2,0));
    font-size:11px; color:var(--dpn-dim); text-decoration:none; letter-spacing:.2px;
    transition:background .3s ease, color .25s ease; }
.dpn-auth-bmu img{ height:44px; width:auto; opacity:.92; margin:-8px 0 -10px; transition:opacity .25s ease; }
.dpn-auth-bmu:hover{ color:#fff; background:linear-gradient(to top, rgba(120,30,20,.6), rgba(120,30,20,0)); }

/* Passwort-vergessen als kleiner Zettel im Feld */
.dpn-forgot{ display:block; text-align:right; margin:7px 2px 0; font-size:11px; color:var(--dpn-dim); text-decoration:none; }
.dpn-forgot:hover{ color:var(--dpn-gold); }
.dpn-pwwrap{ margin:6px 0; }
#bitmeup-login .dpn-pwwrap input[type="password"]{ margin:0 !important; }
.dpn-forgot-in{ position:absolute; right:1px; bottom:1px; margin:0; z-index:6; text-align:left;
    font-size:9px; line-height:1; color:#e9d9b0; padding:5px 10px 5px 15px; background:rgba(232,197,106,.18);
    -webkit-clip-path:polygon(11px 0, 100% 0, 100% 100%, 0 100%); clip-path:polygon(11px 0, 100% 0, 100% 100%, 0 100%);
    border-radius:0 0 5px 0; transition:background .2s ease, color .2s ease; }
.dpn-forgot-in:hover{ background:rgba(232,197,106,.36); color:#fff; }

/* Bitmeup-Login-Formular im Damoria-Stil.
   Aufbau der Client-Vorlage (Bitmeup/js/template/Login.tpl): EINE aeussere
   Zeile mit zwei Zellen - links das Formular (250px, margin-top 38px), rechts
   der eigene Social-Kasten (wird versteckt, wir rendern unsere Knoepfe).
   Innen: Zeile 1 = E-Mail + Login-Knopf (rowspan, rechts daneben), Zeile 2 =
   Passwort. Per Grid werden die Zellen untereinander gestapelt: E-Mail,
   Passwort, Knopf. */
#bitmeup-login > form > table > tbody > tr > td:nth-child(2){ display: none !important; }
#bitmeup-login > form > table > tbody > tr > td:first-child{ padding:0 !important; }
#bitmeup-login #form\.login\.container{ width:100% !important; margin-top:0 !important; }
#bitmeup-login #form\.login\.container > table > tbody{ display:grid; grid-template-columns:1fr; }
#bitmeup-login #form\.login\.container > table > tbody > tr{ display:contents; }
#bitmeup-login #form\.login\.container > table > tbody > tr > td{ display:block; padding:0 !important; }
#bitmeup-login #form\.login\.container > table > tbody > tr > td[rowspan]{ order:3; }
#bitmeup-login #form\.login\.container .form_error{ position:static !important; color:#ffb3a6; font-size:12px; margin-bottom:4px; }
#bitmeup-login table, #bitmeup-register table{ width:100% !important; }
#bitmeup-login input[type="text"], #bitmeup-login input[type="password"],
#bitmeup-register input[type="text"], #bitmeup-register input[type="password"]{
    width:100% !important; box-sizing:border-box !important; height:44px !important; padding:0 14px !important;
    margin:6px 0 !important;
    background: rgba(12,4,3,.72) !important;
    border:1px solid rgba(232,197,106,.28) !important; border-radius:5px !important;
    color:#fff !important; font-family: var(--dpn-body) !important; font-size:15px !important;
    letter-spacing:.2px; outline:none !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
    transition:border-color .2s ease, box-shadow .2s ease;
}
#bitmeup-login input:focus, #bitmeup-register input:focus{
    border-color:var(--dpn-gold) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.5), 0 0 0 2px rgba(232,197,106,.18) !important;
}
#bitmeup-login input::placeholder, #bitmeup-register input::placeholder{ color:#9a8a6e !important; }
#bitmeup-login .loginbutton{
    position:relative !important; inset:auto !important; display:flex !important; align-items:center; justify-content:center;
    width:100% !important; height:46px !important; margin:14px 0 2px !important; border-radius:6px !important;
    cursor:pointer; overflow:hidden;
    background: linear-gradient(180deg, #c8462f 0%, #9a2c1d 55%, #7a1f16 100%) !important;
    border: 1px solid #d4553f;
    box-shadow: 0 0 0 1px rgba(20,4,2,.9), inset 0 1px 0 rgba(255,220,160,.35), 0 8px 22px rgba(0,0,0,.5) !important;
    transition:transform .15s ease, box-shadow .25s ease;
}
#bitmeup-login .loginbutton:hover{ transform:translateY(-2px); box-shadow: 0 0 0 1px #e8c56a, 0 0 18px rgba(232,197,106,.45), 0 10px 26px rgba(0,0,0,.55) !important; }
#bitmeup-login .loginbutton .box{ display:none !important; }
#bitmeup-login .loginbutton::after{ content:var(--dpn-login-label, "Login"); font-family: var(--dpn-serif); color:#ffe9b0; font-size:18px; letter-spacing:.6px; position:relative; z-index:1; text-shadow: 0 1px 0 #3a0a06; }
#bitmeup-login .glyphicons-question-sign{ display:none !important; }
#bitmeup-login, #bitmeup-login *{ font-family: var(--dpn-body) !important; }
#bitmeup-login [class*="glyphicons"], #bitmeup-login [class*="glyphicons"]::before{ font-family:'Glyphicons' !important; }

/* ---------- Scroll-Hinweis ---------- */
.dpn-scroll-hint{
    position:absolute; left:50%; bottom:22px; z-index:5;
    width:42px; height:42px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--dpn-border); background: rgba(30,10,6,.55);
    transform: translateX(-50%); animation: dpn-bounce 1.8s infinite ease-in-out;
    transition: opacity .35s ease;
}
.dpn-scroll-hint:hover{ background: rgba(232,197,106,.18); box-shadow: var(--dpn-glow); }
.dpn-chev{ width:11px; height:11px; border-right:2px solid var(--dpn-gold); border-bottom:2px solid var(--dpn-gold); transform: rotate(45deg) translateY(-2px); }
@keyframes dpn-bounce{ 0%,100%{ transform: translateX(-50%) translateY(0); } 50%{ transform: translateX(-50%) translateY(8px); } }

/* ---------- Feature-Karussell ---------- */
.dpn-caro{ position: relative; margin-top: 8px; }
.dpn-caro-vp{ overflow: hidden; padding: 6px 2px; }
.dpn-caro-track{ display:flex; gap: 20px; transition: transform .5s cubic-bezier(.4,0,.2,1); will-change: transform; }
.dpn-caro-tile{
    flex: 0 0 calc((100% - 40px) / 3);
    position: relative; height: 320px; border-radius: 8px; overflow: hidden;
    background-color: #1c1108; background-size: cover; background-position: center;
    border: 2px solid #8a6a2c; box-shadow: 0 0 0 1px rgba(20,4,2,.9), inset 0 0 0 1px rgba(240,220,158,.18), 0 14px 36px rgba(0,0,0,.5);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dpn-caro-tile:hover{ transform: translateY(-4px); border-color: var(--dpn-gold); box-shadow: 0 0 0 1px rgba(20,4,2,.9), 0 18px 40px rgba(0,0,0,.6), var(--dpn-glow); }
.dpn-caro-tile:before{
    content:""; position:absolute; inset:0; z-index:1;
    background: linear-gradient(180deg, rgba(10,4,2,.02) 0%, rgba(10,4,2,.35) 45%, rgba(20,6,3,.94) 100%);
}
.dpn-caro-tile-in{ position:absolute; left:0; right:0; bottom:0; padding: 20px 20px 18px; z-index:2; }
.dpn-caro-tile-in h4{ margin:0 0 6px; font-family: var(--dpn-serif); font-weight:400; font-size:21px;
    background-image: var(--dpn-goldtext); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1px 0 rgba(30,8,2,.95)); }
.dpn-caro-tile-in p{ margin:0; font-size:13.5px; color: #e6d9bd; }
.dpn-caro-arrow{
    position:absolute; top:50%; transform: translateY(-50%); z-index:5;
    width:46px; height:46px; border-radius:50%; cursor:pointer;
    background: rgba(40,10,6,.9); color:var(--dpn-gold); border:1px solid var(--dpn-border);
    font-size:16px; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 18px rgba(0,0,0,.5); transition: background .2s, box-shadow .2s;
}
.dpn-caro-arrow:hover{ background: rgba(194,57,46,.6); box-shadow: var(--dpn-glow); color:#fff; }
.dpn-caro-prev{ left:-12px; }
.dpn-caro-next{ right:-12px; }
.dpn-caro-dots{ display:flex; justify-content:center; gap:8px; margin-top: 22px; }
.dpn-caro-dots i{ width:9px; height:9px; transform: rotate(45deg); background: rgba(232,197,106,.25); cursor:pointer; transition: all .2s; }
.dpn-caro-dots i.dpn-on{ background: var(--dpn-gold); box-shadow: var(--dpn-glow); }
@media (max-width: 1023px){ .dpn-caro-tile{ flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 699px){ .dpn-caro-tile{ flex-basis: 100%; height: 260px; } .dpn-caro-prev{ left:2px; } .dpn-caro-next{ right:2px; } }

/* ---------- Screenshots ---------- */
.dpn-shots{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dpn-shot{
    position: relative; border-radius: 6px; overflow: hidden; cursor: pointer; aspect-ratio: 16/10;
    border: 2px solid #6b4f22; background:#1c1108;
    box-shadow: 0 0 0 1px rgba(20,4,2,.9), 0 8px 20px rgba(0,0,0,.5);
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.dpn-shot img{ width: 100%; height: 100%; object-fit: cover; display:block; transition: transform .4s ease; }
.dpn-shot:hover{ transform: translateY(-4px); border-color: var(--dpn-gold); box-shadow: 0 14px 34px rgba(0,0,0,.55), var(--dpn-glow); }
.dpn-shot:hover img{ transform: scale(1.06); }
.dpn-shot-cap{
    position:absolute; left:0; right:0; bottom:0; padding: 22px 10px 8px; font-family: var(--dpn-serif); font-size: 13px; color:#f3e9d2;
    background: linear-gradient(180deg, transparent, rgba(10,4,2,.9)); text-shadow: 0 1px 0 #2a1004;
}
.dpn-shot-hidden{ display: none; }

/* Lightbox */
.dpn-lightbox{ position:fixed; inset:0; z-index:9000; display:none; align-items:center; justify-content:center; flex-direction:column; gap:12px;
    background: rgba(8,3,2,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 30px; }
.dpn-lightbox-frame{ position:relative; max-width: min(1240px, 96vw); border: 2px solid #a5813a; border-radius: 6px; background:#000;
    box-shadow: 0 0 0 1px rgba(20,4,2,.9), 0 30px 80px rgba(0,0,0,.8); }
.dpn-lightbox-frame img{ display:block; max-width:100%; max-height: 78vh; }
.dpn-lightbox-bar{ display:flex; align-items:center; gap:18px; color: var(--dpn-dim); font-size: 13px; }
.dpn-lightbox-bar b{ font-family: var(--dpn-serif); font-weight: 400; color: var(--dpn-gold); font-size: 16px; }
.dpn-lightbox-btn{ width:44px; height:44px; border-radius:50%; border:1px solid var(--dpn-border); background: rgba(40,10,6,.9); color:var(--dpn-gold);
    display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px; }
.dpn-lightbox-btn:hover{ background: rgba(194,57,46,.6); color:#fff; box-shadow: var(--dpn-glow); }
.dpn-lightbox-close{ position:absolute; top:-18px; right:-18px; z-index:2; }
.dpn-lightbox-prev, .dpn-lightbox-next{ position:absolute; top:50%; transform: translateY(-50%); z-index:2; }
.dpn-lightbox-prev{ left:-22px; } .dpn-lightbox-next{ right:-22px; }

/* ---------- Schloesser: Mosaik im Hintergrund ---------- */
.dpn-castles{ position: relative; overflow: hidden; isolation: isolate; }
.dpn-mosaic{
    position:absolute; left:-6%; right:-6%; top:-12%; bottom:-12%; z-index:0; pointer-events:none;
    display:grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-content: start;
    opacity: .22; will-change: transform;
    -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%);
            mask-image: radial-gradient(80% 80% at 50% 50%, #000 30%, transparent 100%);
}
.dpn-mosaic img{ width:100%; aspect-ratio:1; object-fit:contain; display:block; filter: sepia(.35) saturate(.9); }
.dpn-mosaic img:nth-child(3n){ transform: translateY(40px); }
.dpn-mosaic img:nth-child(5n){ transform: translateY(-30px) scale(.92); }
.dpn-castles > .dpn-container{ position:relative; z-index:1; }
.dpn-castle-row{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin-top: 8px; }
.dpn-castle{
    text-align:center; padding: 14px 8px 12px; border-radius: 8px;
    background: var(--dpn-panel); border:1px solid var(--dpn-border-soft);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dpn-castle:hover{ transform: translateY(-6px); border-color: var(--dpn-gold); box-shadow: 0 16px 36px rgba(0,0,0,.55), var(--dpn-glow); }
.dpn-castle img{ width:100%; max-width:150px; aspect-ratio:1; object-fit:contain; display:block; margin:0 auto 8px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.7)); transition: transform .3s ease; }
.dpn-castle:hover img{ transform: scale(1.08); }
.dpn-castle b{ display:block; font-family: var(--dpn-serif); font-weight:400; font-size:15px; color:#f3e9d2; text-shadow: 0 1px 0 #2a1004; }
.dpn-castle span{ display:block; font-size:11.5px; color: var(--dpn-dim); margin-top:3px; line-height:1.35; }
@media (max-width: 1100px){ .dpn-castle-row{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px){ .dpn-castle-row{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- Truppen-Parade ---------- */
.dpn-troop-groups{ display:grid; grid-template-columns: 1fr; gap: 26px; margin-top: 10px; }
.dpn-troop-group-h{
    display:flex; align-items:center; gap:14px; margin: 0 0 12px;
    font-family: var(--dpn-serif); font-size: 20px; font-weight: 400;
    background-image: var(--dpn-goldtext); -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 1px 0 rgba(30,8,2,.95));
}
.dpn-troop-group-h:after{ content:""; flex:1; height:1px; background: linear-gradient(90deg, var(--dpn-gold-2), transparent); opacity:.6; }
.dpn-troop-group-h small{ font-family: var(--dpn-body); font-size:11px; letter-spacing:2px; text-transform:uppercase; color: var(--dpn-dim); -webkit-text-fill-color: var(--dpn-dim); filter:none; }
.dpn-troop-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dpn-troop{
    position:relative; cursor:pointer; border-radius: 8px; overflow:hidden; min-height: 210px;
    background: linear-gradient(180deg, rgba(60,20,12,.72), rgba(28,10,6,.85));
    border:1px solid var(--dpn-border-soft);
    box-shadow: 0 8px 24px rgba(0,0,0,.45);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dpn-troop:hover, .dpn-troop.dpn-troop-open{ transform: translateY(-5px); border-color: var(--dpn-gold); box-shadow: 0 16px 36px rgba(0,0,0,.6), var(--dpn-glow); }
.dpn-troop img{ width:100%; aspect-ratio: 304/240; object-fit: contain; display:block; padding: 10px 10px 0; filter: drop-shadow(0 8px 14px rgba(0,0,0,.7)); transition: transform .35s ease; }
.dpn-troop:hover img{ transform: scale(1.06) translateY(-3px); }
.dpn-troop-name{ display:block; text-align:center; padding: 6px 10px 12px; font-family: var(--dpn-serif); font-size: 17px; color:#f3e9d2; text-shadow: 0 1px 0 #2a1004; }
.dpn-troop-desc{
    position:absolute; inset:0; padding: 16px 14px; font-size: 13px; line-height:1.5; color:#f3e9d2;
    background: linear-gradient(180deg, rgba(60,18,10,.96), rgba(28,10,6,.98)); opacity:0; transition: opacity .25s ease; overflow:auto;
}
.dpn-troop-desc b{ display:block; font-family: var(--dpn-serif); font-weight:400; font-size:17px; margin-bottom:6px;
    background-image: var(--dpn-goldtext); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dpn-troop:hover .dpn-troop-desc, .dpn-troop.dpn-troop-open .dpn-troop-desc{ opacity:1; }
@media (max-width: 980px){ .dpn-troop-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px){ .dpn-troop-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- News & Patches ---------- */
.dpn-two{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items:start; }
.dpn-news-item{
    display:flex; gap:16px; background: var(--dpn-panel); border: 1px solid var(--dpn-border-soft);
    border-radius: 8px; padding: 16px 18px; margin-bottom: 14px; transition: border-color .2s, transform .15s;
}
.dpn-news-item:hover{ border-color: var(--dpn-gold); transform: translateX(4px); }
.dpn-news-img{ flex:0 0 118px; width:118px; height:84px; object-fit:cover; border-radius:5px; border:1px solid var(--dpn-border-soft); }
.dpn-news-body{ flex:1; min-width:0; }
.dpn-news-date{ font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dpn-gold); }
.dpn-news-item h4{ margin: 4px 0 6px; font-family: var(--dpn-serif); font-weight:400; font-size: 18px; color:#fff; }
.dpn-news-item p{ margin: 0; font-size: 13px; color: var(--dpn-dim); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.dpn-patch{
    background: var(--dpn-panel); border: 1px solid var(--dpn-border-soft); border-left: 3px solid var(--dpn-red);
    border-radius: 8px; padding: 14px 16px; margin-bottom: 12px;
}
.dpn-patch-head{ display:flex; align-items:center; gap:10px; margin-bottom: 6px; }
.dpn-badge{
    font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
    padding: 3px 8px; border-radius: 4px; background: rgba(194,57,46,.28); color:#ffd9c9; border:1px solid rgba(212,85,63,.6);
}
.dpn-patch-date{ font-size: 11px; color: var(--dpn-dim); }
.dpn-patch h4{ margin: 0 0 6px; font-family: var(--dpn-serif); font-weight:400; font-size: 16px; color:#fff; }
.dpn-patch h4 a{ color:#fff; }
.dpn-patch h4 a:hover{ color: var(--dpn-gold); }
.dpn-patch ul{ margin: 0; padding-left: 18px; }
.dpn-patch li{ font-size: 13px; color: var(--dpn-dim); margin-bottom: 3px; }
.dpn-empty{ color: var(--dpn-dim); font-size: 14px; font-style: italic; }
.dpn-patches-cap{ position:relative; }
.dpn-patches-cap.dpn-capped{
    overflow:hidden;
    -webkit-mask-image:linear-gradient(#000 80%, transparent 100%);
            mask-image:linear-gradient(#000 80%, transparent 100%);
}
.dpn-more{ margin-top:16px; font-family: var(--dpn-serif); font-size: 15px; }

/* ---------- Ruhmeshalle + Welten ---------- */
.dpn-rank-h{ font-family: var(--dpn-serif); font-weight:400; font-size:21px; color:#fff; margin:0 0 16px; text-shadow: 0 1px 0 #2a1004; }
.dpn-rank-list{ list-style:none; margin:0; padding:0; }
.dpn-rank-row{ display:flex; align-items:center; gap:14px; padding:11px 14px; border-radius:6px;
    background:var(--dpn-panel); border:1px solid var(--dpn-border-soft); margin-bottom:8px; color: inherit; transition: border-color .2s, transform .15s; }
a.dpn-rank-row:hover{ border-color: var(--dpn-gold); transform: translateX(3px); color: inherit; }
.dpn-rank-pos{ flex:0 0 auto; width:30px; height:30px; transform: rotate(45deg); display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:12px; color:#2a1004; background: linear-gradient(135deg,#e8c56a,#caa24a); box-shadow: 0 0 0 1px #6d5220; }
.dpn-rank-pos span{ transform: rotate(-45deg); }
.dpn-rank-row:nth-child(1) .dpn-rank-pos{ background:linear-gradient(135deg,#ffe08a,#d9a83a); box-shadow: 0 0 0 1px #6d5220, var(--dpn-glow); }
.dpn-rank-row:nth-child(2) .dpn-rank-pos{ background:linear-gradient(135deg,#e6e9ef,#a9b1bf); box-shadow: 0 0 0 1px #5b6270; }
.dpn-rank-row:nth-child(3) .dpn-rank-pos{ background:linear-gradient(135deg,#e2a46a,#b0703a); box-shadow: 0 0 0 1px #6a3f1c; }
.dpn-rank-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dpn-rank-names{ color:#fff; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dpn-vs{ color:var(--dpn-dim); font-weight:400; font-size:12px; padding:0 4px; font-style: italic; }
.dpn-rank-sub{ color:var(--dpn-dim); font-size:11px; }
.dpn-rank-val{ flex:0 0 auto; color:var(--dpn-gold); font-family: var(--dpn-serif); font-size:15px; text-shadow: 0 0 8px rgba(232,197,106,.3); }

.dpn-world{ background:var(--dpn-panel); border:1px solid var(--dpn-border-soft); border-radius:8px; padding:14px 16px; margin-bottom:10px; position:relative; overflow:hidden; }
.dpn-world:before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--dpn-stripe); }
.dpn-world-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; gap:10px; flex-wrap: wrap; }
.dpn-world-head b{ font-family: var(--dpn-serif); font-weight:400; color:#fff; font-size:18px; }
.dpn-world-head span{ color:var(--dpn-dim); font-size:12px; }
.dpn-world-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color: var(--dpn-dim); margin-bottom: 8px; }
.dpn-world-meta b{ color:#f3e9d2; font-weight:600; }
.dpn-online{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#3bd16f; box-shadow:0 0 7px #3bd16f; margin-right:5px; vertical-align: middle; }
.dpn-world-top{ display:flex; flex-direction:column; gap:4px; font-size:13px; color:#e6d9bd; }
.dpn-world-top span{ display:flex; gap:8px; align-items:center; }
.dpn-world-top i{ font-style:normal; color: var(--dpn-gold); font-family: var(--dpn-serif); width: 18px; }
.dpn-world-top em{ font-style:normal; color: var(--dpn-dim); margin-left:auto; font-size: 12px; }
.dpn-tag-new{ font-size:9px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#ffe9b0; background: linear-gradient(180deg,#b8402f,#8a2a1d); border:1px dashed #e8c56a; padding:2px 6px; border-radius:3px; }

/* ---------- 3D-Karten-Banner ---------- */
.dpn-map3d{
    position:relative; overflow:hidden; border-top: 2px solid #6d5220; border-bottom: 2px solid #6d5220;
    background: #0d1a0a url('/images/start/map3d_banner.jpg?v=2') 60% 40% / cover no-repeat;
    min-height: 500px; display:flex; align-items:center;
}
.dpn-map3d-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 45%; z-index:0; pointer-events:none; }
.dpn-map3d:before{ content:""; position:absolute; inset:0; z-index:1; background: linear-gradient(90deg, rgba(10,5,3,.82) 0%, rgba(10,5,3,.86) 30%, rgba(10,5,3,.55) 50%, rgba(10,5,3,.12) 70%, rgba(10,5,3,0) 100%); }
.dpn-map3d-text .dpn-sub, .dpn-map3d-text .dpn-eyebrow{ text-shadow: 0 2px 10px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9); }
.dpn-map3d-text .dpn-h2{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.85)); }
.dpn-map3d .dpn-container{ position:relative; z-index:2; padding-top: 50px; padding-bottom: 50px; }
.dpn-map3d-text{ max-width: 560px; }
.dpn-map3d-text .dpn-sub{ margin-bottom: 22px; }

/* ---------- Discord ---------- */
.dpn-discord{
    position: relative; overflow:hidden;
    background:
        radial-gradient(260px 220px at 100% 0%, rgba(88,101,242,.28), transparent 70%),
        linear-gradient(120deg, rgba(88,101,242,.16), rgba(120,30,20,.18));
    border: 1px solid rgba(232,197,106,.24); border-radius: 12px;
    padding: 40px 44px; display:flex; align-items:center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.dpn-discord h3{ margin: 0 0 8px; font-family: var(--dpn-serif); font-weight:400; font-size: 28px; color:#fff; text-shadow: 0 1px 0 #2a1004; }
.dpn-discord p{ margin: 0; color: var(--dpn-dim); max-width: 560px; }

/* ---------- Chronik / Historie ---------- */
.dpn-legacy{ display:grid; grid-template-columns:300px 1fr; gap:46px; align-items:start; }
.dpn-pub-eras{ margin-bottom:22px; }
.dpn-pub-eras .dpn-legacy-logos-label{ display:block; text-align:center; margin-bottom:12px; color:var(--dpn-dim); font-size:12px; text-transform:uppercase; letter-spacing:1.5px; }
.dpn-pub-era{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
    border:1px solid var(--dpn-border-soft); border-radius:8px; background:var(--dpn-panel); padding:18px 16px; }
.dpn-pub-era + .dpn-pub-era{ margin-top:10px; }
.dpn-pub-era-bmu{ background:linear-gradient(180deg, rgba(232,197,106,.08), var(--dpn-panel)); border-color: var(--dpn-border); }
.dpn-pub-era .dpn-legacy-logo{ height:40px; width:auto; opacity:.95; }
.dpn-pub-era .dpn-legacy-badge{ font-family: var(--dpn-serif); font-size:26px; color:#f3e9d2; letter-spacing:.5px; }
.dpn-pub-era .dpn-legacy-years{ font-size:12px; color:var(--dpn-dim); letter-spacing:.5px; }
.dpn-legacy-crest{ border-radius:8px; overflow:hidden; border:2px solid #a5813a; box-shadow:0 0 0 1px rgba(20,4,2,.9), 0 20px 50px rgba(0,0,0,.6); background: radial-gradient(circle at 50% 30%, #3a1109, #150705); padding: 22px; text-align:center; }
.dpn-legacy-crest img{ width:100%; max-width: 220px; display:block; margin: 0 auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.8)); }
.dpn-legacy-cap{ margin-top:12px; font-size:12px; color:var(--dpn-dim); font-style:italic; text-align:center; }
.dpn-legacy-worlds{ margin-top: 14px; padding: 14px 16px; border-radius: 8px; background: var(--dpn-panel); border:1px solid var(--dpn-border-soft); font-size: 12.5px; color: var(--dpn-dim); line-height: 1.6; }
.dpn-legacy-worlds b{ display:block; font-family: var(--dpn-serif); font-weight: 400; font-size: 15px; color: var(--dpn-gold); margin-bottom: 4px; }

.dpn-timeline{ list-style:none; margin:0; padding:0; position:relative; }
.dpn-timeline:before{ content:""; position:absolute; left:64px; top:6px; bottom:14px; width:2px;
    background:linear-gradient(180deg, var(--dpn-gold), rgba(232,197,106,.08)); }
.dpn-timeline li{ position:relative; display:flex; gap:32px; padding:0 0 22px; }
.dpn-tl-year{ flex:0 0 48px; text-align:right; font-family: var(--dpn-serif); color:var(--dpn-gold); font-size:16px; padding-top: 1px; }
.dpn-tl-year:after{ content:""; position:absolute; left:59px; top:7px; width:11px; height:11px; transform: rotate(45deg);
    background:var(--dpn-gold); box-shadow:var(--dpn-glow), 0 0 0 1px #6d5220; }
.dpn-tl-now .dpn-tl-year{ color:#fff; }
.dpn-tl-now .dpn-tl-year:after{ background:#fff; }
.dpn-tl-body{ flex:1; }
.dpn-tl-body b{ color:#fff; font-size:15px; display:block; margin-bottom:4px; font-family: var(--dpn-serif); font-weight: 400; font-size: 16px; }
.dpn-tl-body p{ margin:0; color:var(--dpn-dim); font-size:13.5px; }
.dpn-tl-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:4px; }
.dpn-tl-head b{ display:inline; margin:0; }
.dpn-tl-publogo{ height:22px; width:auto; opacity:.9; }
.dpn-tl-pubbadge{ font-weight:800; color:#e9d9b0; font-size:12px; letter-spacing:1px; text-transform: uppercase; padding: 2px 8px; border:1px solid var(--dpn-border); border-radius: 4px; }
@media(max-width:760px){ .dpn-legacy{ grid-template-columns:1fr; } .dpn-legacy-media{ max-width:280px; margin:24px auto 0; order:2; } .dpn-timeline{ order:1; } }

/* ---------- Danksagung ---------- */
.dpn-thanks{ margin-top:46px; padding:38px 34px; border-radius:12px; position:relative; overflow:hidden; text-align:center;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(120,30,20,.28), transparent 60%),
        linear-gradient(180deg, rgba(36,12,8,.7), rgba(16,6,4,.85));
    border:1px solid var(--dpn-border); }
.dpn-thanks:before{ content:""; position:absolute; left:20px; right:20px; top:0; height:2px; background: var(--dpn-stripe); }
.dpn-thanks-title{ font-size:13px; text-transform:uppercase; letter-spacing:3px; color:var(--dpn-gold); font-weight:700; margin-bottom:26px; }
.dpn-thanks-lead{ max-width:340px; margin:0 auto 30px; padding:24px 22px; border-radius:8px; position:relative;
    background:radial-gradient(120% 130% at 50% 0%, rgba(232,197,106,.16), rgba(28,10,6,.7)); border:1px solid var(--dpn-border); }
.dpn-thanks-lead-tag{ display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:2px; color:#3a2a06; font-weight:800;
    background:linear-gradient(135deg,#ffe08a,#e0a93b); padding:5px 14px; border-radius:20px; margin-bottom:12px; box-shadow:0 4px 14px rgba(224,169,59,.4); }
.dpn-thanks-lead-name{ font-family: var(--dpn-serif); font-size:30px; color:#fff; letter-spacing:1px; animation:dpn-lead-glow 3s ease-in-out infinite; }
@keyframes dpn-lead-glow{ 0%,100%{ text-shadow:0 0 14px rgba(232,197,106,.4); } 50%{ text-shadow:0 0 28px rgba(232,197,106,.85); } }
.dpn-thanks-lead-note{ font-size:12px; color:var(--dpn-dim); margin-top:6px; }
.dpn-thanks-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; }
.dpn-thanks-card{ grid-column:span 2; background:rgba(28,10,6,.6); border:1px solid var(--dpn-border-soft); border-radius:8px; padding:20px 16px;
    transition:border-color .2s ease, transform .2s ease; }
.dpn-thanks-card:hover{ border-color:var(--dpn-gold); transform:translateY(-3px); }
.dpn-thanks-card-h{ font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:var(--dpn-gold); font-weight:700; margin-bottom:14px; }
.dpn-thanks-people{ display:flex; flex-direction:column; gap:8px; align-items:center; }
.dpn-thanks-people span{ font-family: var(--dpn-serif); font-size:14px; color:#f3e9d2; background:rgba(232,197,106,.07); border:1px solid var(--dpn-border-soft);
    padding:5px 14px; border-radius:20px; transition:background .2s ease, color .2s ease; }
.dpn-thanks-people span:hover{ background:rgba(232,197,106,.18); color:#fff; }
.dpn-thanks-card-wide{ grid-column:span 3; }
.dpn-thanks-card-x4{ grid-column:span 4; }
.dpn-thanks-subhead{ grid-column:1/-1; margin:14px 0 0; padding-top:16px; border-top:1px solid var(--dpn-border-soft); text-align:center; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:2.5px; color:var(--dpn-dim); }
.dpn-thanks-people.dpn-thanks-flow{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:7px; }
.dpn-thanks-note{ font-size:11.5px; font-style:italic; color:var(--dpn-dim); line-height:1.55; margin:14px auto 0; max-width:40em; }
@media(max-width:760px){ .dpn-thanks-grid{ grid-template-columns:repeat(2,1fr); } .dpn-thanks-card{ grid-column:span 1; } .dpn-thanks-card-wide, .dpn-thanks-card-x4{ grid-column:span 2; } }

/* ---------- Fusszeile ---------- */
.dpn-footer{
    position: relative; z-index: 4;
    background: linear-gradient(180deg, rgba(84,16,11,.98) 0%, rgba(40,8,5,.99) 100%);
    padding: 26px 0 24px; font-size: 13px; color: #e9d9b0;
}
.dpn-footer:before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background: var(--dpn-stripe); }
.dpn-footer-row{ display:flex; align-items:center; justify-content:space-between; gap: 20px; flex-wrap: wrap; }
.dpn-footer-links a{ color: #e9d9b0; margin: 0 4px; }
.dpn-footer-links a:hover{ color:#fff; text-shadow: var(--dpn-glow); }
.dpn-footer-social img{ height: 28px; border-radius: 5px; box-shadow: 0 0 3px #000; cursor:pointer; margin-left: 8px; vertical-align: middle; transition: transform .15s; }
.dpn-footer-social img:hover{ transform: translateY(-2px); }

/* ---------- Sprachmenue in der Leiste ---------- */
.dpn-langs{ position: relative; }
.dpn-lang-toggle{ cursor:pointer; display:inline-flex; align-items:center; gap:6px; color: #e9d9b0; font-size:14px; }
.dpn-lang-toggle:hover{ color:#fff; }
.dpn-lang-menu{
    display:none; position:absolute; top: 38px; right: 0; left:auto; width:auto; min-width:330px; z-index: 60;
    background: var(--dpn-panel-solid); border: 1px solid var(--dpn-border); border-radius: 8px;
    padding: 8px; box-shadow: 0 16px 36px rgba(0,0,0,.6);
    grid-template-columns: 1fr 1fr 1fr; gap: 2px;
    max-height: 70vh; overflow-y: auto;
}
.dpn-langs.dpn-open .dpn-lang-menu{ display: grid; }
.dpn-lang-menu a{ display:flex; align-items:center; gap:8px; padding: 7px 10px; border-radius:5px; color: var(--dpn-dim); font-size: 12px; white-space: nowrap; }
.dpn-lang-menu a:hover{ background: rgba(232,197,106,.14); color:#fff; }
.dpn-lang-menu img{ width: 16px; flex: 0 0 16px; }

/* ---------- Reveal ---------- */
.dpn-reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.dpn-reveal.dpn-in{ opacity:1; transform: none; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar{ width: 11px; }
::-webkit-scrollbar-track{ background:#150a06; }
::-webkit-scrollbar-thumb{ background:#5a2a1c; border-radius:6px; }
::-webkit-scrollbar-thumb:hover{ background:#7a3a26; }

/* =========================================================================
   Modals: Registrieren (Bitmeup-Client), Status/Passwort-vergessen
   ========================================================================= */
.light_container{ position: fixed; left:0; top:0; z-index: 9000; background: rgba(8,3,2,.8); width:100%; height:100%; }
#div_register_site{
    -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); overflow-y:auto;
}
#div_register_site > table{ height:auto !important; }
#div_register_site > table > tbody > tr > td{ vertical-align:top !important; padding:48px 16px !important; }
#div_register_site #registration_box{
    position:relative; width:auto !important; max-width:440px !important; margin:0 auto !important; overflow:visible !important;
    background:linear-gradient(180deg, rgba(48,14,9,.98), rgba(22,7,5,.98)) !important;
    border:2px solid #a5813a; border-radius:8px; padding:34px 30px 26px !important;
    box-shadow:0 0 0 1px rgba(20,4,2,.9), inset 0 0 0 1px rgba(240,220,158,.18), 0 30px 70px rgba(0,0,0,.7);
}
#div_register_site #registration_box:before{ content:""; position:absolute; left:14px; right:14px; top:-2px; height:2px; background: var(--dpn-stripe); }
.dpn-modal-close{
    position:absolute; top:12px; right:12px; z-index:3;
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%; text-decoration:none; cursor:pointer;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); color:#e9d9b0; font-size:16px;
    transition:background .2s ease, border-color .2s ease;
}
.dpn-modal-close:hover{ background:rgba(232,197,106,.2); border-color:var(--dpn-gold); color:#fff; }
#div_register_site, #div_register_site *{ font-family: var(--dpn-body) !important; }
/* AGB-/Newsletter-Zeilen: helle Schrift statt Dunkelrot auf Samt */
#bitmeup-register td, #bitmeup-register span, #bitmeup-register label{ color:#e6d9bd; }
#bitmeup-register label span{ color:#e6d9bd !important; font-size:12.5px !important; }
#bitmeup-register a{ color: var(--dpn-gold) !important; text-decoration: underline; }
#bitmeup-register a:hover{ color:#fff !important; }
#bitmeup-register input[type="checkbox"]{ accent-color: #c2392e; width:16px; height:16px; vertical-align: middle; }
#bitmeup-register > div > span.bitmeupfont{
    font-family: var(--dpn-serif) !important; letter-spacing:1px; font-size: 24px !important; font-weight: 400 !important;
    background-image: var(--dpn-goldtext); -webkit-background-clip: text; background-clip: text; color: transparent !important;
}
#bitmeup-register input[type="button"]{
    width:100% !important; height:48px !important; margin-top:8px !important; border:1px solid #d4553f !important;
    border-radius:6px !important; cursor:pointer; font-family: var(--dpn-serif) !important;
    background: linear-gradient(180deg, #c8462f 0%, #9a2c1d 55%, #7a1f16 100%) !important;
    color:#ffe9b0 !important; font-size:18px !important; text-shadow: 0 1px 0 #3a0a06;
    box-shadow: 0 0 0 1px rgba(20,4,2,.9), inset 0 1px 0 rgba(255,220,160,.35), 0 8px 24px rgba(0,0,0,.5) !important; transition:transform .15s ease, box-shadow .25s ease;
}
#bitmeup-register input[type="button"]:hover{ transform:translateY(-2px); box-shadow: 0 0 0 1px #e8c56a, 0 0 18px rgba(232,197,106,.45), 0 10px 28px rgba(0,0,0,.55) !important; }
#bitmeup-register div[onclick*="Facebook"], #bitmeup-register div[onclick*="Google"], #bitmeup-register div[onclick*="Steam"]{
    width:100% !important; max-width:360px; margin:9px auto !important; padding:11px 16px !important;
    background-image:none !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:6px !important;
    box-shadow:none !important; box-sizing:border-box;
}
#bitmeup-register div[onclick*="Facebook"]{ background:linear-gradient(135deg,#1877F2,#0f57c8) !important; }
#bitmeup-register div[onclick*="Google"]{ background:linear-gradient(135deg,#3a3f4b,#23272f) !important; }
#bitmeup-register div[onclick*="Steam"]{ background:linear-gradient(135deg,#2a475e,#1b2838) !important; }
#bitmeup-register div[onclick*="Facebook"] span, #bitmeup-register div[onclick*="Google"] span, #bitmeup-register div[onclick*="Steam"] span{
    color:#fff !important; text-shadow:none !important; font-size:15px !important; font-weight:600 !important;
}
#bitmeup-register div[onclick] img{ border-radius:4px; }
#bitmeup-register div[style*="cursor:help"]{ top:50% !important; bottom:auto !important; right:13px !important; transform:translateY(-50%); }
#bitmeup-register .questm{ font-size:20px !important; color:#9a8a6e !important; }
#bitmeup-register br{ display:none !important; }
#bitmeup-register table:has(.register_link){ width:100% !important; margin:16px 0 !important; }
#bitmeup-register td > div[style*="height:1px"]{ width:100% !important; height:1px !important; margin:0 !important; background:rgba(232,197,106,.25) !important; box-shadow:none !important; }
#div_register_site .register_link{
    animation:none !important; cursor:default !important;
    font-size:12px !important; font-weight:600 !important; text-transform:uppercase; letter-spacing:2px;
    color:var(--dpn-dim) !important; text-shadow:none !important; padding:0 6px;
}

/* Status-/Passwort-vergessen-Box des Bitmeup-Clients */
#game\.status{ -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); background:rgba(8,3,2,.78) !important; }
#game\.status, #game\.status *{ font-family: var(--dpn-body) !important; }
#game\.status #bitmeup\.status\.color{ min-width:0 !important; min-height:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; }
#game\.status .bitmeup_border_2{ display:none !important; }
#game\.status .bitmeup_border_content{ position:static !important; padding:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
#game\.status #bitmeup\.status\.color .status_blue,
#game\.status #bitmeup\.status\.color > div[style*="width"]{
    width:380px !important; max-width:90vw !important; height:auto !important; min-height:0 !important; overflow:visible !important;
    padding:28px !important; border-radius:8px !important; border:2px solid #a5813a !important;
    background:linear-gradient(180deg, rgba(48,14,9,.98), rgba(22,7,5,.98)) !important;
    box-shadow:0 0 0 1px rgba(20,4,2,.9), 0 30px 70px rgba(0,0,0,.7) !important;
}
#game\.status span{ color:#f3e9d2 !important; font-size:15px !important; }
#game\.status input[type="text"], #game\.status input[type="password"]{
    width:100% !important; box-sizing:border-box !important; height:44px !important; padding:0 14px !important; margin:10px 0 !important;
    background:rgba(12,4,3,.72) !important; background-image:none !important;
    border:1px solid rgba(232,197,106,.28) !important; border-radius:5px !important; color:#fff !important; font-size:15px !important;
    outline:none !important; box-shadow:none !important;
}
#game\.status input[type="text"]:focus, #game\.status input[type="password"]:focus{ border-color:var(--dpn-gold) !important; }
#game\.status input[type="button"]{
    height:44px !important; min-width:130px; padding:0 18px !important; margin:8px 5px 0 !important; border:1px solid #d4553f !important;
    border-radius:6px !important; cursor:pointer; font-family: var(--dpn-serif) !important; font-size:16px !important;
    background: linear-gradient(180deg, #c8462f 0%, #9a2c1d 55%, #7a1f16 100%) !important; color:#ffe9b0 !important;
    box-shadow:0 8px 24px rgba(0,0,0,.4) !important; transition:filter .15s ease, transform .15s ease;
}
#game\.status input[type="button"]:hover{ filter:brightness(1.1); transform:translateY(-1px); }
#game\.status input[type="button"][onclick*="hide"]{
    background:transparent !important; color:var(--dpn-text) !important; border:1px solid var(--dpn-border) !important; box-shadow:none !important;
}
.message_box{
    display:inline-block; background: var(--dpn-panel-solid); padding: 22px;
    border: 1px solid var(--dpn-border); border-radius: 8px; color:#fff; font-size: 15px;
    box-shadow: 0 0 18px rgba(232,197,106,.2);
}
html.dpn-modal-open, html.dpn-modal-open body{ overflow:hidden !important; }
#div_register_site, #game\.status, .dpn-lightbox{ overscroll-behavior:contain; }

/* ---------- Sperrhinweis (sBan) ---------- */
.dpn-ban{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center; background: rgba(8,3,2,.85); }
.dpn-ban-box{ position:relative; max-width:520px; padding:34px 30px; border-radius:8px; border:2px solid #a5813a; text-align:center; font-size:17px;
    background:linear-gradient(180deg, rgba(48,14,9,.98), rgba(22,7,5,.98)); box-shadow: 0 30px 70px rgba(0,0,0,.7); }

/* =========================================================================
   Mobile / schmale Viewports
   ========================================================================= */
.dpn-burger{ display:none; }
@media (prefers-reduced-motion: reduce){
    .dpn-cta, .dpn-cta::before, .dpn-scroll-hint, .dpn-thanks-lead-name{ animation:none !important; }
}
@media (max-width: 980px){
    .dpn-page{ overflow-x:clip; }
    .dpn-nav{ padding:10px 14px; }
    .dpn-brand{ left:14px; top:8px; }
    .dpn-brand img{ height:44px !important; }
    .dpn-brand span{ font-size: 18px; }
    .dpn-burger{
        display:flex; flex-direction:column; justify-content:center; gap:5px;
        width:46px; height:40px; padding:10px 11px; margin-left:auto; z-index:3;
        background:rgba(40,10,6,.7); border:1px solid var(--dpn-border); border-radius:7px; cursor:pointer;
    }
    .dpn-burger span{ display:block; height:2px; width:100%; background:#e9d9b0; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
    .dpn-nav.dpn-menu-open .dpn-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .dpn-nav.dpn-menu-open .dpn-burger span:nth-child(2){ opacity:0; }
    .dpn-nav.dpn-menu-open .dpn-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    .dpn-nav-links{
        position:absolute; top:100%; left:0; right:0;
        flex-direction:column; align-items:stretch; gap:0;
        background:rgba(30,6,4,.98); border-bottom:2px solid #a5813a;
        padding:6px 16px 14px; box-shadow:0 22px 44px rgba(0,0,0,.55);
        max-height:0; overflow:hidden; opacity:0; pointer-events:none;
        transition:max-height .3s ease, opacity .2s ease;
    }
    .dpn-nav.dpn-menu-open .dpn-nav-links{ max-height:84vh; overflow:auto; opacity:1; pointer-events:auto; }
    .dpn-nav-links > a:not(.dpn-nav-cta){ display:block; padding:13px 4px; font-size:17px; border-bottom:1px solid rgba(255,255,255,.06); }
    .dpn-nav-cta{ margin-top:13px; text-align:center; padding:13px; font-size:17px; }
    .dpn-langs{ padding:11px 4px; border-bottom:1px solid rgba(255,255,255,.06); }
    .dpn-lang-menu{ position:static; display:none; box-shadow:none; background:transparent; border:0; margin-top:10px; padding:0; }
    .dpn-langs.dpn-open .dpn-lang-menu{ display:grid; grid-template-columns:repeat(2,1fr); gap:4px; }

    .dpn-hero{ padding-top:88px !important; align-items:flex-start !important; min-height:auto; }
    .dpn-hero-grid{ grid-template-columns:minmax(0,1fr) !important; gap:24px !important; }
    .dpn-hero-left{ display:contents; }
    .dpn-hero-pitch{ order:1; }
    .dpn-hero-right{ order:2; }
    .dpn-hero-news{ order:3; }
    .dpn-hero-quick{ order:4; }
    .dpn-hero-pitch, .dpn-hero-news, .dpn-hero-quick, .dpn-hero-right{ min-width:0; max-width:100%; }
    .dpn-hero-left h1{ font-size:34px !important; overflow-wrap:break-word; }
    .dpn-hero-tag{ max-width:none; }
    .dpn-hero-play{ justify-content:center; }
    .dpn-hero-play .dpn-btn{ min-width:0; width:auto; padding:16px 30px; }
    .dpn-stats{ justify-content:center; }
    .dpn-auth{ max-width:none !important; width:100%; margin:0 !important; padding:18px 18px 20px !important; box-sizing:border-box; }
    .dpn-auth-bmu{ margin:16px -18px -20px; }
    #bitmeup-login, #bitmeup-login table{ max-width:100% !important; }
    .dpn-hero-quick{ justify-content:center; }

    .dpn-section{ padding:48px 0; }
    .dpn-h2{ font-size:28px; }
    .dpn-two{ grid-template-columns:1fr; }
    .dpn-shots{ grid-template-columns:repeat(2, 1fr); }
    .dpn-discord{ padding:28px 22px; }
    .dpn-discord h3{ font-size:24px; }
    .dpn-footer-row{ flex-direction:column; align-items:flex-start; gap:16px; }
    .dpn-map3d{ min-height: 300px; background-position: 62% 40%; }
    .dpn-map3d-video{ display:none; }
    .dpn-lightbox{ padding: 12px; }
    .dpn-lightbox-close{ top:-14px; right:-8px; }
    .dpn-lightbox-prev{ left:-6px; } .dpn-lightbox-next{ right:-6px; }
}
@media (max-width: 560px){
    .dpn-container{ padding: 0 18px; }
    .dpn-hero-left h1{ font-size:30px !important; }
    .dpn-shots{ grid-template-columns:1fr; }
    .dpn-thanks-grid{ grid-template-columns:1fr; }
    .dpn-thanks-card, .dpn-thanks-card-wide, .dpn-thanks-card-x4{ grid-column:span 1; }
    .dpn-hero-quick a{ flex:1 1 100%; text-align:center; justify-content:center; }
    .dpn-caro-tile-in h4{ font-size:18px; }
    .dpn-stat{ flex:1 1 40%; }
}
/* echte Mobilgeraete: teure Effekte aus */
.dpn-mobile .dpn-cta{ animation:none !important; }
.dpn-mobile .dpn-scroll-hint{ display:none; }
.dpn-mobile .dpn-mosaic{ opacity:.14; }

/* =========================================================================
   Runde 3 (07.09.): prunkvolle Login-Felder, Anmelde-Medaillons, Registrier-
   Knoepfe, News-Datum unter dem Bild, Video-Kacheln, 8 Schloesser, Chronik-
   Video, Karten-Demo (2D + 3D Overlay)
   ========================================================================= */

/* ---------- Topbar: nur das Schild-Logo ---------- */
.dpn-brand img{ height: 56px; }

/* ---------- Login-/Registrier-Felder: Goldfassung, keine Schatten ---------- */
#bitmeup-login input[type="text"], #bitmeup-login input[type="password"],
#bitmeup-register input[type="text"], #bitmeup-register input[type="password"]{
    height:46px !important; padding:0 38px !important; margin:0 !important;
    text-align:center !important;
    background: linear-gradient(180deg, rgba(22,7,4,.92), rgba(44,13,8,.92)) !important;
    border:1px solid #a5813a !important; border-radius:3px !important;
    box-shadow: inset 0 0 0 1px rgba(20,4,2,.95), inset 0 0 0 2px rgba(232,197,106,.22) !important;
    color:#ffe9b0 !important; font-family: var(--dpn-serif) !important; font-size:16px !important; letter-spacing:.4px;
}
#bitmeup-login input:focus, #bitmeup-register input:focus{
    border-color:#f0dc9e !important;
    box-shadow: inset 0 0 0 1px rgba(20,4,2,.95), inset 0 0 0 2px rgba(232,197,106,.45), 0 0 12px rgba(232,197,106,.35) !important;
}
#bitmeup-login input::placeholder, #bitmeup-register input::placeholder{
    color:#c9a95a !important; opacity:.85; font-family: var(--dpn-serif) !important; font-size:15px !important; letter-spacing:1px; text-align:center;
}
#bitmeup-register input[type="text"], #bitmeup-register input[type="password"]{ margin:7px 0 !important; }
/* Rahmen-Span mit Zierrauten links und rechts (setzt start_new.js) */
.dpn-field{ position:relative; display:block; margin:8px 0; }
.dpn-field-orn{ position:absolute; top:50%; width:22px; height:10px; margin-top:-5px; pointer-events:none;
    background:
        radial-gradient(circle at 50% 50%, #f0dc9e 0, #caa24a 45%, transparent 50%) center/8px 8px no-repeat,
        linear-gradient(90deg, transparent, #caa24a 30%, #caa24a 70%, transparent) center/100% 1px no-repeat;
    opacity:.85; }
.dpn-field-orn-l{ left:9px; } .dpn-field-orn-r{ right:9px; }
.dpn-field:focus-within .dpn-field-orn{ opacity:1; filter: drop-shadow(0 0 4px rgba(232,197,106,.8)); }
#bitmeup-login .dpn-field input[type="password"]{ padding-right:96px !important; }
.dpn-forgot-in{ right:0; bottom:0; padding:5px 10px 5px 15px; border-radius:0 0 3px 0; background:rgba(232,197,106,.22); color:#ffe9b0; }
#bitmeup-login #form\.login\.container .form_error{ text-align:center; }

/* ---------- Anmelde-Medaillons (Startseite): Samt mit Goldfassung, Marke nur im Medaillon ---------- */
.dpn-sso{
    --brand:#caa24a;
    min-height:44px; border-radius:4px; overflow:visible; position:relative;
    background: linear-gradient(180deg, #4a160f 0%, #2b0b07 100%);
    border:1px solid #a5813a; box-shadow: inset 0 0 0 1px rgba(20,4,2,.9), inset 0 0 0 2px rgba(232,197,106,.16), 0 6px 16px rgba(0,0,0,.45);
    color:#efe1bf; font-family: var(--dpn-serif); font-weight:400; font-size:14.5px; letter-spacing:.3px;
    transition: transform .15s ease, box-shadow .25s ease, border-color .2s ease;
}
.dpn-sso:hover{ transform: translateY(-2px); border-color:#f0dc9e; color:#fff; filter:none;
    box-shadow: inset 0 0 0 1px rgba(20,4,2,.9), inset 0 0 0 2px rgba(232,197,106,.3), 0 10px 24px rgba(0,0,0,.5), 0 0 16px rgba(232,197,106,.35), 0 3px 0 -1px var(--brand); }
.dpn-sso-ic{
    flex:0 0 44px; width:44px; background:transparent; position:relative;
}
.dpn-sso-ic:before{ content:""; position:absolute; left:8px; top:50%; width:30px; height:30px; margin-top:-15px; border-radius:50%;
    background: var(--brand); box-shadow: 0 0 0 1px #6d5220, 0 0 0 3px rgba(20,4,2,.9), 0 0 0 4px #a5813a, 0 0 10px rgba(0,0,0,.6); }
.dpn-sso-ic svg, .dpn-sso-ic img{ position:relative; z-index:1; margin-left:2px; }
.dpn-sso-ic img{ width:22px; height:22px; }
.dpn-sso:after{ content:""; position:absolute; right:10px; top:50%; width:22px; height:10px; margin-top:-5px; pointer-events:none; opacity:.7;
    background:
        radial-gradient(circle at 50% 50%, #f0dc9e 0, #caa24a 45%, transparent 50%) center/7px 7px no-repeat,
        linear-gradient(90deg, transparent, #caa24a 30%, #caa24a 70%, transparent) center/100% 1px no-repeat; }
.dpn-sso-tx{ padding:0 26px 0 4px; justify-content:flex-start; }
.dpn-sso-google{ --brand:#ffffff; background: linear-gradient(180deg, #4a160f 0%, #2b0b07 100%); color:#efe1bf; border-color:#a5813a; }
.dpn-sso-google .dpn-sso-ic{ background:transparent; }
.dpn-sso-google:hover{ color:#fff; }
.dpn-sso-fb{ --brand:#1877F2; background: linear-gradient(180deg, #4a160f 0%, #2b0b07 100%); }
.dpn-sso-fb .dpn-sso-ic{ background:transparent; }
.dpn-sso-steam{ --brand:#1b2838; background: linear-gradient(180deg, #4a160f 0%, #2b0b07 100%); }
.dpn-sso-steam .dpn-sso-ic{ background:transparent; }
.dpn-sso-steam .dpn-sso-ic img{ width:24px; height:24px; }
.dpn-sso-steamstore{ --brand:#0d1219; background: linear-gradient(180deg, #4a160f 0%, #2b0b07 100%); }
.dpn-sso-steamstore .dpn-sso-ic{ position:relative; top:auto; left:auto; flex:0 0 44px; width:44px; height:auto; }
.dpn-sso-steamstore .dpn-sso-ic img{ width:22px; height:22px; }
.dpn-sso-steamstore .dpn-sso-tx{ text-align:left; padding:0 26px 0 4px; }
.dpn-sso-row .dpn-sso-ic{ flex-basis:44px; width:44px; }
/* Discord-Knopf (Gemeinschaft) behaelt sein Lila, bekommt aber die Goldfassung */
.dpn-sso-discord{ --brand:#5865F2; background: linear-gradient(135deg,#5865F2,#404EED); border-color:#a5813a; color:#fff; }
.dpn-sso-discord .dpn-sso-ic:before{ display:none; }
.dpn-sso-discord:after{ display:none; }
.dpn-sso-discord .dpn-sso-tx{ justify-content:center; padding:0 14px; }

/* ---------- Registrier-Fenster: Anmelde-Knoepfe im gleichen Prunk ---------- */
#bitmeup-register div[onclick*="Facebook"], #bitmeup-register div[onclick*="Google"], #bitmeup-register div[onclick*="Steam"]{
    --brand:#caa24a; position:relative; overflow:visible;
    background: linear-gradient(180deg, #4a160f 0%, #2b0b07 100%) !important;
    border:1px solid #a5813a !important; border-radius:4px !important; padding:9px 34px 9px 12px !important;
    box-shadow: inset 0 0 0 1px rgba(20,4,2,.9), inset 0 0 0 2px rgba(232,197,106,.16), 0 6px 16px rgba(0,0,0,.45) !important;
    transition: transform .15s ease, box-shadow .25s ease, border-color .2s ease;
}
#bitmeup-register div[onclick*="Facebook"]{ --brand:#1877F2; }
#bitmeup-register div[onclick*="Google"]{ --brand:#ffffff; }
#bitmeup-register div[onclick*="Steam"]{ --brand:#1b2838; }
#bitmeup-register div[onclick*="Facebook"]:hover, #bitmeup-register div[onclick*="Google"]:hover, #bitmeup-register div[onclick*="Steam"]:hover{
    transform: translateY(-2px); border-color:#f0dc9e !important;
    box-shadow: inset 0 0 0 1px rgba(20,4,2,.9), inset 0 0 0 2px rgba(232,197,106,.3), 0 10px 24px rgba(0,0,0,.5), 0 0 16px rgba(232,197,106,.35), 0 3px 0 -1px var(--brand) !important;
}
#bitmeup-register div[onclick*="Facebook"]::after, #bitmeup-register div[onclick*="Google"]::after, #bitmeup-register div[onclick*="Steam"]::after{
    content:""; position:absolute; right:10px; top:50%; width:22px; height:10px; margin-top:-5px; pointer-events:none; opacity:.7; inset:auto 10px auto auto; z-index:1;
    -webkit-mask:none; mask:none;
    background:
        radial-gradient(circle at 50% 50%, #f0dc9e 0, #caa24a 45%, transparent 50%) center/7px 7px no-repeat,
        linear-gradient(90deg, transparent, #caa24a 30%, #caa24a 70%, transparent) center/100% 1px no-repeat;
}
#bitmeup-register div[onclick] img{
    width:20px !important; height:20px !important; border-radius:50% !important; padding:5px; box-sizing:content-box; background: var(--brand);
    box-shadow: 0 0 0 1px #6d5220, 0 0 0 3px rgba(20,4,2,.9), 0 0 0 4px #a5813a, 0 0 10px rgba(0,0,0,.6);
}
#bitmeup-register div[onclick*="Facebook"] span, #bitmeup-register div[onclick*="Google"] span, #bitmeup-register div[onclick*="Steam"] span{
    color:#efe1bf !important; font-family: var(--dpn-serif) !important; font-weight:400 !important; font-size:15px !important; letter-spacing:.3px;
}

/* ---------- News: Datum unter dem Bild ---------- */
.dpn-news-side{ flex:0 0 118px; width:118px; display:flex; flex-direction:column; gap:6px; align-items:center; }
.dpn-news-side .dpn-news-date{ font-size:10.5px; text-align:center; letter-spacing:.8px; }
.dpn-news-item h4{ margin-top:0; }

/* ---------- Feature-Kachel mit Schleifenvideo ---------- */
.dpn-caro-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; z-index:0; background:#1c1108; }
.dpn-caro-tile:before{ z-index:1; }

/* ---------- 8 Schloesser in einer Reihe ---------- */
.dpn-castle-row{ grid-template-columns: repeat(8, 1fr); gap:12px; }
.dpn-castle{ padding:12px 6px 10px; }
.dpn-castle b{ font-size:14px; }
.dpn-castle span{ font-size:11px; }
@media (max-width: 1100px){ .dpn-castle-row{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px){ .dpn-castle-row{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- Chronik: Titelvideo statt Wappen ---------- */
.dpn-legacy-vid{ padding:0; aspect-ratio: 16/10; background:#000; }
.dpn-legacy-vid video{ width:100%; height:100%; object-fit:cover; object-position:15% top; display:block; }

/* ---------- 3D-Banner: zwei Knoepfe ---------- */
.dpn-map3d-btns{ display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- Karten-Demo (Overlay) ---------- */
.dpn-demo{ position:fixed; inset:0; z-index:9100; display:none; align-items:center; justify-content:center; padding:24px;
    background: rgba(8,3,2,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dpn-demo-box{ position:relative; width:min(1100px, 96vw); max-height:94vh; display:flex; flex-direction:column;
    background: linear-gradient(180deg, rgba(48,14,9,.98), rgba(22,7,5,.98)); border:2px solid #a5813a; border-radius:8px;
    box-shadow: 0 0 0 1px rgba(20,4,2,.9), inset 0 0 0 1px rgba(240,220,158,.18), 0 30px 80px rgba(0,0,0,.8); overflow:hidden; }
.dpn-demo-box:before{ content:""; position:absolute; left:14px; right:14px; top:-2px; height:2px; background: var(--dpn-stripe); z-index:2; }
.dpn-demo-head{ display:flex; align-items:center; gap:18px; padding:14px 56px 12px 20px; border-bottom:1px solid var(--dpn-border-soft); }
.dpn-demo-head > b{ font-family: var(--dpn-serif); font-weight:400; font-size:22px;
    background-image: var(--dpn-goldtext); -webkit-background-clip:text; background-clip:text; color:transparent; filter: drop-shadow(0 1px 0 rgba(30,8,2,.95)); }
.dpn-demo-tabs{ display:flex; gap:6px; margin-left:auto; }
.dpn-demo-tab{ font-family: var(--dpn-serif); font-size:14px; color:#e9d9b0; padding:7px 16px; border-radius:4px; border:1px solid var(--dpn-border);
    background: rgba(30,10,6,.6); }
.dpn-demo-tab:hover{ color:#fff; border-color: var(--dpn-gold); }
.dpn-demo-tab.dpn-on{ background: linear-gradient(180deg, #c8462f 0%, #9a2c1d 55%, #7a1f16 100%); border-color:#d4553f; color:#ffe9b0; box-shadow: 0 0 12px rgba(194,57,46,.4); }
.dpn-demo-head .dpn-modal-close{ top:12px; right:14px; }
.dpn-demo-body{ position:relative; flex:1 1 auto; min-height:300px; overflow:auto; background:#0c0704; }
.dpn-demo-foot{ padding:10px 20px 12px; font-size:12px; color: var(--dpn-dim); border-top:1px solid var(--dpn-border-soft); text-align:center; }

.dpn-demo-2d{ padding:14px; }
.dpn-demo-grid{ position:relative; display:inline-block; margin:0 auto; left:50%; transform:translateX(-50%); }
.dpn-demo-table{ border-collapse:collapse; border:2px solid #6d5220; box-shadow: 0 0 0 1px rgba(20,4,2,.9), 0 12px 30px rgba(0,0,0,.6); }
.dpn-demo-table th{ font-family: var(--dpn-serif); font-weight:400; font-size:11px; color:#caa24a; background:#1c1108; padding:2px 4px; text-align:center; }
.dpn-demo-table th:first-child{ width:34px; }
.dpn-demo-table td{ width:64px; height:64px; padding:0; position:relative; background-size:64px 64px; background-repeat:no-repeat; cursor:pointer; }
.dpn-demo-table td:hover{ outline:2px solid #e8c56a; outline-offset:-2px; z-index:2; }
.dpn-demo-castle{ position:absolute; inset:0; width:64px; height:64px; display:block; }
.dpn-demo-castle-big{ width:56px; height:56px; left:4px; top:4px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.dpn-demo-dot{ position:absolute; left:4px; top:4px; width:9px; height:9px; border-radius:50%; border:1px solid #000; background:#3bd16f; }
.dpn-demo-dot-0{ background:#e04848; } .dpn-demo-dot-2{ background:#9bff9b; } .dpn-demo-dot-3{ background:#ffd76a; } .dpn-demo-dot-999{ background:#000; }
.dpn-demo-camp{ position:absolute; left:6px; top:6px; width:52px; height:52px; object-fit:contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.dpn-demo-animal{ position:absolute; left:8px; top:8px; width:48px; height:48px; object-fit:contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.dpn-demo-tip{ display:none; position:absolute; z-index:6; min-width:150px; padding:8px 12px; border-radius:4px; pointer-events:none;
    background: rgba(28,10,6,.96); border:1px solid #a5813a; box-shadow: 0 8px 22px rgba(0,0,0,.6); font-size:12px; color:#e6d9bd; }
.dpn-demo-tip b{ display:block; font-family: var(--dpn-serif); font-weight:400; font-size:15px; color: var(--dpn-gold); margin-bottom:2px; }
.dpn-demo-tip span{ display:block; }
/* Drache: kreist ueber der Kachelkarte */
.dpn-demo-dragon{ position:absolute; left:50%; top:52%; width:0; height:0; pointer-events:none; z-index:4; }
.dpn-demo-dragon-orbit{ position:absolute; left:0; top:0; width:0; height:0; animation: dpn-orbit 22s linear infinite; }
.dpn-demo-dragon-orbit img{ position:absolute; left:150px; top:-36px; width:110px; height:72px; object-fit:contain; transform: rotate(90deg) scaleX(-1);
    filter: brightness(.45) sepia(1) saturate(4) hue-rotate(-20deg) drop-shadow(0 0 4px rgba(255,120,40,.5)); animation: dpn-flap 1.1s ease-in-out infinite alternate; }
.dpn-demo-dragon-orbit span{ position:absolute; left:160px; top:20px; width:80px; height:36px; border-radius:50%; background: rgba(0,0,0,.35); filter: blur(6px); }
@keyframes dpn-orbit{ to{ transform: rotate(360deg); } }
@keyframes dpn-flap{ from{ transform: rotate(90deg) scaleX(-1) scaleY(.92); } to{ transform: rotate(90deg) scaleX(-1) scaleY(1.06); } }

.dpn-demo-3d{ position:relative; width:100%; height:min(72vh, 760px); background:#0c0704; }
#damoria-map3d{ position:absolute; inset:0; width:100%; height:100%; }
#damoria-map3d canvas{ display:block; }
.dpn-demo-note{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:14px 22px; border-radius:6px; z-index:3;
    background: rgba(28,10,6,.94); border:1px solid #a5813a; font-family: var(--dpn-serif); font-size:16px; color:#ffe9b0; text-align:center; max-width:80%; }
@media (max-width: 760px){
    .dpn-demo{ padding:8px; }
    .dpn-demo-head{ padding:12px 50px 10px 14px; gap:10px; flex-wrap:wrap; }
    .dpn-demo-head > b{ font-size:18px; }
    .dpn-demo-tabs{ margin-left:0; }
    .dpn-demo-3d{ height:60vh; }
}

/* ---------- Discord: Giveaway-Plakette ---------- */
.dpn-giveaway{ display:inline-block; vertical-align:middle; margin-left:10px; padding:4px 11px; border-radius:20px;
    font-family: var(--dpn-body); font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:#3a2a06;
    background: linear-gradient(135deg,#ffe08a,#e0a93b); border:1px solid #f0dc9e; box-shadow: 0 4px 14px rgba(224,169,59,.4); animation: dpn-cta-pulse 3s ease-in-out infinite; text-shadow:none; }
/* Anmelde-Medaillons: kuerzere Labels, weniger Rand */
.dpn-sso-tx{ padding:0 22px 0 2px; font-size:14px; }

/* =========================================================================
   Runde 4: Athanor-Startknopf als Hero-CTA, Zierrauten oben/unten, Probekarte
   mit der Kachelkarte des Spiels, Hover-Kaesten
   ========================================================================= */

/* ---------- Hero-CTA: Knopf der Athanor-Seite mit Raederwerk ---------- */
.dpn-ath-launch{ position:relative; display:flex; justify-content:flex-start; margin:-6px 0 22px -14px; padding:22px 0 18px 14px; min-height:150px; }
.dpn-ath-start{
    position:relative; z-index:2; display:inline-block; width:430px; height:141px;
    background: url('/images/athanor/quintstart.png?v=2') no-repeat center / contain; text-decoration:none;
    filter: drop-shadow(0 4px 9px rgba(0,0,0,.55));
    transition: filter .25s ease, transform .15s ease;
}
.dpn-ath-start > span{
    position:absolute; left:15%; right:15%; top:50%; transform:translateY(-52%); text-align:center;
    font-family: var(--dpn-serif); font-size:21px; line-height:1.1; color:#ffe9b0;
    text-shadow: 0 2px 3px rgba(0,0,0,.75), 0 0 10px rgba(0,0,0,.5); pointer-events:none;
}
.dpn-ath-start:hover{ filter: drop-shadow(0 4px 14px rgba(255,190,90,.55)); transform: translateY(-2px); }
.dpn-ath-cog{
    position:absolute; z-index:1; top:50%; pointer-events:none; opacity:.55;
    background-repeat:no-repeat; background-position:center; background-size:contain;
    animation-iteration-count:infinite; animation-timing-function:linear; animation-duration:36s;
}
.dpn-ath-cog-l{ width:118px; height:118px; margin-top:-59px; left:-12px; background-image:url('/images/athanor/gear2.png?v=3'); animation-name:dpn-cog-l; }
.dpn-ath-cog-r{ width:132px; height:132px; margin-top:-66px; left:388px; background-image:url('/images/athanor/gear4.png?v=3'); animation-name:dpn-cog-r; }
.dpn-ath-launch:hover .dpn-ath-cog{ animation-duration:9s; opacity:.75; }
@keyframes dpn-cog-l{ to{ transform: rotate(360deg); } }
@keyframes dpn-cog-r{ to{ transform: rotate(-360deg); } }
@media (max-width: 980px){
    .dpn-ath-launch{ justify-content:center; margin-left:0; padding-left:0; }
    .dpn-ath-cog{ display:none; }
    .dpn-ath-start{ width:min(430px, 92vw); height:calc(min(430px, 92vw) * 0.328); }
    .dpn-ath-start > span{ font-size:18px; }
}

/* ---------- Anmelde-Medaillons: Zierrauten mittig oben und unten statt im Text ---------- */
.dpn-sso:before, .dpn-sso:after{
    content:""; position:absolute; left:50%; width:26px; height:9px; margin-left:-13px; right:auto; top:auto; bottom:auto; margin-top:0; pointer-events:none; opacity:.9;
    background:
        radial-gradient(circle at 50% 50%, #f0dc9e 0, #caa24a 45%, transparent 50%) center/7px 7px no-repeat,
        linear-gradient(90deg, transparent, #caa24a 30%, #caa24a 70%, transparent) center/100% 1px no-repeat;
}
.dpn-sso:before{ top:-5px; }
.dpn-sso:after{ bottom:-5px; }
.dpn-sso-tx{ padding:0 8px 0 2px; font-size:14px; }
.dpn-sso-discord:before, .dpn-sso-discord:after{ display:none; }
#bitmeup-register div[onclick*="Facebook"], #bitmeup-register div[onclick*="Google"], #bitmeup-register div[onclick*="Steam"]{ padding:9px 12px !important; }
#bitmeup-register div[onclick*="Facebook"]::after, #bitmeup-register div[onclick*="Google"]::after, #bitmeup-register div[onclick*="Steam"]::after,
#bitmeup-register div[onclick*="Facebook"]::before, #bitmeup-register div[onclick*="Google"]::before, #bitmeup-register div[onclick*="Steam"]::before{
    content:""; position:absolute; left:50%; width:26px; height:9px; margin-left:-13px; inset:auto; right:auto; margin-top:0; pointer-events:none; opacity:.9; z-index:1;
    -webkit-mask:none; mask:none;
    background:
        radial-gradient(circle at 50% 50%, #f0dc9e 0, #caa24a 45%, transparent 50%) center/7px 7px no-repeat,
        linear-gradient(90deg, transparent, #caa24a 30%, #caa24a 70%, transparent) center/100% 1px no-repeat;
}
#bitmeup-register div[onclick*="Facebook"]::before, #bitmeup-register div[onclick*="Google"]::before, #bitmeup-register div[onclick*="Steam"]::before{ top:-5px; }
#bitmeup-register div[onclick*="Facebook"]::after, #bitmeup-register div[onclick*="Google"]::after, #bitmeup-register div[onclick*="Steam"]::after{ bottom:-5px; top:auto; }

/* ---------- Probekarte: Kachelkarte des Spiels im Overlay ---------- */
.dpn-demo-body{ overflow:hidden; }
.dpn-demo-2d{ padding:14px 14px 18px; }
.dpn-demo-ctrl{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin:0 0 22px; font-size:13px; color: var(--dpn-dim); }
.dpn-demo-ctrl b{ color: var(--dpn-gold); font-family: var(--dpn-serif); font-weight:400; font-size:15px; }
.dpn-demo-ctrl label{ display:inline-flex; align-items:center; gap:8px; }
.dpn-demo-ctrl input[type="range"]{ width:120px; accent-color:#c2392e; }
.dpn-demo-ctrl input[type="checkbox"]{ accent-color:#c2392e; width:15px; height:15px; }
.dpn-demo-mapwrap{ position:relative; margin:16px auto 0; width:800px; }
#coords-x{ position:absolute; top:-16px; left:2px; width:800px; height:16px; overflow:hidden; font-size:11px; }
#coords-y{ position:absolute; top:-2px; right:-30px; width:30px; height:800px; overflow:hidden; font-size:11px; }
.dpn-demo-mapbox{ position:relative; overflow:hidden; width:800px; height:800px; background:#1c1108; cursor:move;
    border:2px solid #6d5220; box-shadow: 0 0 0 1px rgba(20,4,2,.9), 0 12px 30px rgba(0,0,0,.6);
    -webkit-user-select:none; user-select:none; }
#damoria-map-dragger{ position:relative; width:100%; height:100%; }
#damoria-map{ position:relative; }
.dpn-demo-mapbox table{ border-collapse:collapse; }
.dpn-demo-mapbox td{ padding:0; line-height:0; font-size:0; position:relative; }
.dpn-demo-mapbox td > img{ display:block; }
.dpn-demo-mapbox img{ -webkit-user-drag:none; user-drag:none; -webkit-user-select:none; user-select:none; }
.dpn-demo-sp{ position:absolute; left:0; top:0; width:64px; height:64px; display:flex; align-items:flex-end; justify-content:center; cursor:pointer; }
.dpn-demo-sp img{ display:block; max-width:60px; max-height:60px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.dpn-demo-mapbox td a img{ display:block; }
/* Hover-Kaesten (Burg, Lager, Tiere) - liegen am body, ueber dem Overlay */
.dpn-hoverbox{ position:fixed; z-index:9300; pointer-events:none; }
.dpn-cv{ min-width:200px; max-width:300px; padding:10px 12px; border-radius:4px; background: rgba(28,10,6,.97); border:1px solid #a5813a;
    box-shadow: 0 0 0 1px rgba(20,4,2,.9), 0 10px 26px rgba(0,0,0,.65); color:#e6d9bd; font-family: var(--dpn-body); font-size:12.5px; }
.dpn-cv-h{ display:flex; align-items:center; gap:10px; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid var(--dpn-border-soft); }
.dpn-cv-h b{ flex:1; font-family: var(--dpn-serif); font-weight:400; font-size:15px; color: var(--dpn-gold); }
.dpn-cv-h i{ width:11px; height:11px; border-radius:50%; border:1px solid #000; }
.dpn-cv-row{ display:flex; justify-content:space-between; gap:14px; padding:2px 0; }
.dpn-cv-row span{ color: var(--dpn-dim); }
.dpn-cv-row b{ font-weight:600; color:#f3e9d2; text-align:right; }
@media (max-width: 900px){ .dpn-demo-mapwrap, #coords-x{ width:100%; } #coords-y{ display:none; } }

/* ---------- Runde 5: Zahnraeder ruhig, CTA naeher am Text, Zahlen unter dem Login ---------- */
.dpn-ath-launch:hover .dpn-ath-cog{ animation-duration:36s; opacity:.55; }
.dpn-ath-cog{ transition:none; }
.dpn-hero-left .dpn-hero-tag{ margin-bottom:6px; }
.dpn-ath-launch{ margin-top:-16px; padding-top:8px; padding-bottom:6px; min-height:0; margin-bottom:14px; }
.dpn-ath-cog-l, .dpn-ath-cog-r{ top:50%; }
.dpn-stats-side{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0 0; }
.dpn-stats-side .dpn-stat{ padding:5px 10px 5px 9px; background: rgba(30,10,6,.55); border-radius:0 4px 4px 0; }
.dpn-stats-side .dpn-stat b{ font-size:18px; }
.dpn-stats-side .dpn-stat span{ font-size:9.5px; letter-spacing:1px; white-space:normal; line-height:1.2; }
.dpn-hero-news{ margin-top:0; }
@media (max-width: 980px){ .dpn-stats-side{ order:2; } }

/* ---------- Runde 6: Login-Kasten kompakter, Titel als Plakette auf dem Rand ---------- */
.dpn-auth{ padding:24px 20px 18px; margin-top:14px; overflow:visible; }
.dpn-auth:before{ display:none; }
.dpn-auth-title{
    position:absolute; left:50%; top:0; transform:translate(-50%,-50%); margin:0; white-space:nowrap;
    padding:5px 18px; font-size:17px; line-height:1.1;
    background: linear-gradient(180deg, #4a160f 0%, #2b0b07 100%); border:1px solid #a5813a; border-radius:4px;
    box-shadow: 0 0 0 1px rgba(20,4,2,.9), inset 0 0 0 1px rgba(232,197,106,.18), 0 6px 16px rgba(0,0,0,.5);
    filter:none; color:transparent;
}
.dpn-auth-title:before, .dpn-auth-title:after{
    content:""; position:absolute; top:50%; width:22px; height:9px; margin-top:-4px; pointer-events:none; opacity:.9;
    background:
        radial-gradient(circle at 50% 50%, #f0dc9e 0, #caa24a 45%, transparent 50%) center/7px 7px no-repeat,
        linear-gradient(90deg, transparent, #caa24a 30%, #caa24a 70%, transparent) center/100% 1px no-repeat;
}
.dpn-auth-title:before{ left:-30px; } .dpn-auth-title:after{ right:-30px; }
#bitmeup-login{ margin-top:2px; }
.dpn-field{ margin:6px 0; }
#bitmeup-login .loginbutton{ margin:10px 0 0 !important; height:42px !important; }
.dpn-auth-or{ margin:12px 0 10px; }
.dpn-sso{ min-height:38px; font-size:13.5px; }
.dpn-sso-row .dpn-sso-ic{ flex-basis:40px; width:40px; }
.dpn-sso-ic:before{ width:26px; height:26px; margin-top:-13px; left:7px; }
.dpn-sso-ic svg{ width:16px; height:16px; }
.dpn-sso-ic img{ width:18px; height:18px; }
.dpn-sso-steam .dpn-sso-ic img{ width:20px; height:20px; }
.dpn-auth-reg{ margin-top:12px; font-size:12.5px; }
.dpn-auth-bmu{ margin:12px -20px -18px; padding:9px 16px; }
.dpn-auth-bmu img{ height:36px; margin:-6px 0 -8px; }
/* Zahlen: zwei Reihen mit Luft */
.dpn-stats-side{ grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.dpn-stats-side .dpn-stat{ padding:9px 12px 8px 11px; }
.dpn-stats-side .dpn-stat b{ font-size:22px; }
.dpn-stats-side .dpn-stat span{ font-size:9.5px; letter-spacing:.8px; margin-top:2px; }
@media (max-width: 980px){ .dpn-auth-title{ white-space:normal; max-width:80%; text-align:center; } }
.dpn-auth-title{ -webkit-background-clip:padding-box; background-clip:padding-box; color:#ffe9b0; -webkit-text-fill-color:#ffe9b0; text-shadow: 0 1px 0 #3a0a06, 0 0 8px rgba(0,0,0,.6); }

/* ---------- Bernstein-/Siedlungs-Schloss auf der Kachelkarte: 1:1 aus www/cssMin/updates.css (animierte Sprites) ---------- */
.prGoldMap{ background-color:#CBB765; }
.amber-castle-container{
    position: relative;
}

.amber-day_winter{
    background-image:url(/images/amber/snow.png);
}
.amber-night_winter{
    background-image:url(/images/amber/snownight.png);
}
.amber-day{
    background-image:url(/images/amber/green.png);
}
.amber-night{
    background-image:url(/images/amber/greennight.png);
}
.amber-day_lava{
    background-image:url(/images/amber/lava.png);
}
.amber-night_lava{
    background-image:url(/images/amber/lavanight.png);
}

.amber-castle-image{
    position: absolute;
    transform-origin: top left;
    inset-inline-start: -50%;
    top: -50%;
    display: inline-block;
    width: 128px;
    height: 128px; 
    overflow: hidden; 
    background-repeat: no-repeat;    
    
    animation-name: castleH, castleV;
    animation-duration: 1s, 4s; 
    animation-timing-function: steps(15), steps(4);            
    animation-iteration-count: infinite, infinite;
    
    -webkit-animation-name: castleH, castleV;
    -webkit-animation-duration: 1s, 4s; 
    -webkit-animation-timing-function: steps(15), steps(4);            
    -webkit-animation-iteration-count: infinite, infinite;    
}
/* transform-origin und der Versatz sind hier eine feste
   Bildgeometrie, keine Leserichtung - in RTL muss die Grafik
   von der anderen Ecke aus wachsen. */
[dir="rtl"] .amber-castle-image {
    transform-origin: top right;
}

@keyframes castleH { 
    from { 
        background-position-x: 0px;
    } 
    to{
        background-position-x: -1920px;
    }
}
@keyframes castleV { 
    from { 
        background-position-y: 0px;
    } 
    to{
        background-position-y: -512px;
    }
}

@-webkit-keyframes castleH { 
    from { 
        background-position-x: 0px;
    } 
    to{
        background-position-x: -1920px;
    }
}
@-webkit-keyframes castleV { 
    from { 
        background-position-y: 0px;
    } 
    to{
        background-position-y: -512px;
    }
}
.settle-castle-container{
    position: relative;
}

.settle-day_winter{
    background-image:url(/images/events/settler/winter_day.jpg);
}
.settle-night_winter{
    background-image:url(/images/events/settler/winter_night.jpg);
}
.settle-day{
    background-image:url(/images/events/settler/day.jpg);
}
.settle-night{
    background-image:url(/images/events/settler/night.jpg);
}
.settle-day_lava{
    background-image:url(/images/events/settler/lava_day.jpg);
}
.settle-night_lava{
    background-image:url(/images/events/settler/lava_night.jpg);
}

.settle-castle-image{
    position: absolute;
    transform-origin: top left;
    inset-inline-start: -50%;
    top: -50%;
    display: inline-block;
    width: 128px;
    height: 128px; 
    overflow: hidden; 
    background-repeat: no-repeat;    
    
    animation-name: castleH, castleV;
    animation-duration: 1s, 4s; 
    animation-timing-function: steps(15), steps(4);            
    animation-iteration-count: infinite, infinite;
    
    -webkit-animation-name: castleH, castleV;
    -webkit-animation-duration: 1s, 4s; 
    -webkit-animation-timing-function: steps(15), steps(4);            
    -webkit-animation-iteration-count: infinite, infinite;    
}
/* transform-origin und der Versatz sind hier eine feste
   Bildgeometrie, keine Leserichtung - in RTL muss die Grafik
   von der anderen Ecke aus wachsen. */
[dir="rtl"] .settle-castle-image {
    transform-origin: top right;
}

/* ---------- Runde 7: Scroll-Abdunklung im Hintergrund-Layer (nie ueber dem Inhalt) ---------- */
.dpn-bg .dpn-scrim{ position:absolute; inset:0; z-index:3; }
.dpn-bg:after{ z-index:2; }
.dpn-bg video{ z-index:1; }

/* ---------- Runde 8: Registrierung - Athanor-Knopf + saubere Medaillons ---------- */
#bitmeup-register input[type="button"]{
    width:100% !important; max-width:380px; height:auto !important; aspect-ratio: 860 / 282; margin:6px auto 2px !important;
    border:0 !important; border-radius:0 !important; background: url('/images/athanor/quintstart.png?v=2') no-repeat center / contain !important;
    color:#ffe9b0 !important; font-family: var(--dpn-serif) !important; font-size:20px !important; letter-spacing:.4px;
    padding:0 15% 3px !important; text-shadow: 0 2px 3px rgba(0,0,0,.75), 0 0 10px rgba(0,0,0,.5);
    box-shadow:none !important; filter: drop-shadow(0 4px 9px rgba(0,0,0,.55)); cursor:pointer;
    transition: filter .25s ease, transform .15s ease;
}
#bitmeup-register input[type="button"]:hover{ transform:translateY(-2px); filter: drop-shadow(0 4px 14px rgba(255,190,90,.55)); box-shadow:none !important; }
/* Medaillon: das Markenbild selbst als runde Muenze mit Goldring - kein farbiger Rand mehr */
#bitmeup-register .register-xtra-button td[width="40px"] > div{ height:36px !important; width:40px !important; }
#bitmeup-register .register-xtra-button td[width="40px"] > div > div{ top:0 !important; left:0 !important; }
#bitmeup-register .register-xtra-button td[width="40px"] > div > div > div{ height:36px !important; width:36px !important; }
#bitmeup-register .register-xtra-button td[width="40px"] > div > div > div > div{ top:0 !important; height:36px !important; width:36px !important; }
#bitmeup-register div[onclick] img{
    width:30px !important; height:30px !important; padding:0 !important; margin:3px !important; border-radius:50% !important; object-fit:cover;
    background:#fff; box-shadow: 0 0 0 1px #6d5220, 0 0 0 3px rgba(20,4,2,.9), 0 0 0 4px #a5813a, 0 0 10px rgba(0,0,0,.6);
}
#bitmeup-register div[onclick*="Facebook"] img{ background:#1877F2; }
#bitmeup-register div[onclick*="Steam"] img{ background:#1b2838; }
#bitmeup-register .register-xtra-button td:not([width]) span{ padding-left:6px; }

/* ---------- Runde 9: Steam-Logo als Vektor in beiden Medaillons ---------- */
.dpn-steam-wrap{ display:inline-flex; align-items:center; justify-content:center; }
.dpn-steam-svg{ display:block; fill:#fff; }
.dpn-sso-ic .dpn-steam-wrap{ position:relative; z-index:1; margin-left:2px; }
.dpn-sso-ic .dpn-steam-svg{ width:19px; height:19px; }
.dpn-sso-steam{ --brand:#2a475e; } .dpn-sso-steamstore{ --brand:#1b2838; }
#bitmeup-register div[onclick*="Steam"] .dpn-steam-wrap{
    width:30px; height:30px; margin:3px; border-radius:50%; background: radial-gradient(circle at 35% 30%, #2a475e, #16202c 70%);
    box-shadow: 0 0 0 1px #6d5220, 0 0 0 3px rgba(20,4,2,.9), 0 0 0 4px #a5813a, 0 0 10px rgba(0,0,0,.6);
}
#bitmeup-register div[onclick*="Steam"] .dpn-steam-svg{ width:22px; height:22px; }