:root{--gold:#d9ad54;--gold-light:#ffe19a;--gold-dark:#76501f;--green:#93bd53;--green-light:#c9e779;--panel:rgba(34,25,28,.94);--text:#eee2ce;--muted:#b9ad9e}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--text);font-family:Georgia,"Times New Roman",serif;background:radial-gradient(ellipse at 78% 5%,rgba(229,116,255,.58),rgba(172,99,208,.35) 18%,transparent 42%),radial-gradient(ellipse at 18% 8%,rgba(255,193,164,.55),rgba(218,137,173,.32) 27%,transparent 48%),linear-gradient(180deg,#6d537d,#9b6f8c 18%,#c28b92 34%,#807250 58%,#3e5535 78%,#182619);background-attachment:fixed}body:before{content:"";position:fixed;z-index:-3;inset:0;background:radial-gradient(ellipse at 12% 78%,#6f8d3e 0 11%,transparent 12%),radial-gradient(ellipse at 34% 86%,#759343 0 18%,transparent 19%),radial-gradient(ellipse at 72% 84%,#6d8b3b 0 20%,transparent 21%),radial-gradient(ellipse at 93% 74%,#789846 0 13%,transparent 14%),linear-gradient(to top,rgba(30,53,27,.96),rgba(54,83,38,.84) 17%,transparent 38%)}a{color:inherit}.sky{position:fixed;z-index:-2;inset:0;overflow:hidden;pointer-events:none}.cloud{position:absolute;width:480px;height:105px;border-radius:50%;opacity:.3;filter:blur(15px);background:radial-gradient(ellipse,rgba(255,225,210,.9),rgba(238,190,201,.54) 55%,transparent 72%)}.cloud.one{top:8%;left:-9%;transform:rotate(-7deg)}.cloud.two{top:17%;right:-12%;width:620px;transform:rotate(5deg)}.cloud.three{top:36%;left:30%;width:390px;opacity:.2}.island{position:absolute;border-radius:48% 52% 42% 58%;background:linear-gradient(180deg,#829c46 0 15%,#657c3b 16% 23%,#8d6537 24% 37%,#5a3d28 38% 65%,#2a211d 66%);box-shadow:0 24px 35px rgba(31,14,21,.5),inset 0 7px 11px rgba(222,238,129,.26)}.island:after{content:"";position:absolute;top:68%;left:12%;width:76%;height:105%;clip-path:polygon(0 0,100% 0,84% 28%,72% 73%,58% 100%,43% 61%,28% 91%,15% 43%);background:linear-gradient(135deg,#6f4a2d,#422c23 48%,#21191a)}.island.one{top:23%;left:7%;width:150px;height:56px;transform:rotate(-7deg)}.island.two{top:19%;right:12%;width:220px;height:72px;transform:rotate(4deg)}.island.three{top:48%;left:53%;width:90px;height:32px;opacity:.82}.hero{position:relative;min-height:420px;display:grid;place-items:center;text-align:center;border-bottom:1px solid rgba(224,185,103,.62);background:linear-gradient(180deg,rgba(58,32,71,.13),rgba(46,28,42,.18) 52%,rgba(18,20,18,.76))}.hero-inner{padding:50px 20px}.emblem{display:grid;width:76px;height:76px;margin:0 auto 16px;place-items:center;border:2px solid var(--gold);border-radius:50%;color:var(--gold-light);background:radial-gradient(circle,rgba(126,181,85,.8),rgba(27,20,28,.95) 68%);box-shadow:0 0 24px rgba(119,217,94,.35)}.kicker{margin:0 0 12px;color:var(--green-light);font:700 12px Arial,sans-serif;letter-spacing:3px;text-transform:uppercase}.hero h1{margin:0;color:var(--gold-light);font-size:clamp(42px,7vw,78px);line-height:1;text-transform:uppercase;text-shadow:0 3px #4a3010,0 7px 14px #000}.subtitle{margin:18px 0 0;font-size:clamp(17px,2.5vw,23px);font-style:italic;text-shadow:0 2px 6px #000}.nav{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--gold-dark);background:linear-gradient(180deg,rgba(66,48,40,.98),rgba(24,20,23,.98));box-shadow:0 8px 18px rgba(0,0,0,.5)}.nav-inner{display:flex;max-width:1180px;min-height:64px;margin:auto;justify-content:center}.nav a{display:flex;padding:0 24px;align-items:center;text-decoration:none;text-transform:uppercase;font:700 13px Arial,sans-serif;letter-spacing:1px;color:#cec4b5;border-bottom:2px solid transparent}.nav a:hover,.nav a.active{color:var(--gold-light);border-color:var(--gold);background:rgba(147,189,83,.08)}.nav a.account{color:var(--green-light)}main{width:min(1160px,calc(100% - 32px));margin:52px auto 80px}.panel{padding:42px clamp(20px,5vw,62px);border:1px solid rgba(216,180,92,.5);background:linear-gradient(145deg,rgba(61,46,39,.92),rgba(24,22,25,.94));box-shadow:0 18px 50px rgba(0,0,0,.48)}.overline{margin:0;color:var(--green-light);font:700 11px Arial,sans-serif;letter-spacing:3px;text-transform:uppercase}.panel h2,.section-title h2{margin:5px 0 0;color:var(--gold-light);font-weight:400;font-size:clamp(28px,4vw,40px)}.panel p{color:#cec3b4;font:16px/1.75 Arial,sans-serif}.section-title{display:flex;align-items:end;gap:22px;margin:58px 0 24px}.section-title:after{content:"";height:1px;flex:1;margin-bottom:9px;background:linear-gradient(90deg,var(--gold-dark),transparent)}.section-title p{margin:0;color:var(--green-light);font:700 11px Arial,sans-serif;letter-spacing:2px;text-transform:uppercase}.footer{padding:38px 20px;text-align:center;color:#877d75;border-top:1px solid rgba(216,180,92,.3);background:rgba(18,15,18,.97);font:13px Arial,sans-serif}.footer strong{display:block;color:var(--gold);font-family:Georgia,serif;margin-bottom:8px}@media(max-width:820px){.nav-inner{overflow-x:auto;justify-content:flex-start}.nav a{min-width:max-content;padding:0 17px}.hero{min-height:350px}.island{opacity:.55}}@media(max-width:560px){main{width:min(100% - 18px,1160px);margin-top:28px}.panel{padding:30px 18px}.hero h1{font-size:42px}}
.table-panel{overflow:hidden;border:1px solid rgba(216,180,92,.46);background:var(--panel);box-shadow:0 18px 44px rgba(0,0,0,.45)}.scroll{overflow-x:auto}.ranking,.characters{width:100%;border-collapse:collapse;font-family:Arial,sans-serif}.ranking{min-width:920px}.ranking th,.characters th{padding:16px;border-bottom:1px solid rgba(216,180,92,.4);background:rgba(20,17,21,.82);color:var(--gold-light);font-size:11px;text-transform:uppercase;letter-spacing:1px;text-align:left}.ranking td,.characters td{padding:17px;border-bottom:1px solid rgba(216,180,92,.13);color:#d6cdbd;font-size:14px}.account-row{cursor:pointer}.account-row:hover,.account-row.open{background:linear-gradient(90deg,rgba(132,175,76,.12),rgba(215,171,83,.07))}.account-row.open{box-shadow:inset 4px 0 var(--green-light)}.num{text-align:right!important}.rank{text-align:center!important;width:70px}.account-name{display:block;color:var(--gold-light);font:19px Georgia,serif}.count{display:block;margin-top:4px;color:var(--muted);font-size:10px;text-transform:uppercase}.gold{color:#e2bd68!important}.points{color:var(--green-light)!important}.toggle{font-size:22px;color:var(--gold-light);text-align:center}.detail>td{padding:0!important;background:rgba(24,19,22,.98)}.details{padding:24px 28px 30px;border-left:4px solid var(--green-light)}.bank{display:inline-block;margin-bottom:20px;padding:15px 18px;border:1px solid rgba(216,180,92,.35);background:rgba(10,8,12,.3)}.bank small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase}.bank strong{color:var(--gold-light);font:20px Georgia,serif}.characters{min-width:800px;border:1px solid rgba(216,180,92,.25)}.char-name{color:#f0ddad;font:16px Georgia,serif}.badge{display:inline-block;min-width:75px;padding:5px 8px;text-align:center;border:1px solid;font-size:10px;text-transform:uppercase}.alliance{color:#b8d9ff;border-color:#649fe2;background:rgba(45,93,155,.25)}.horde{color:#ffb6ad;border-color:#cf584c;background:rgba(139,46,39,.27)}.error{padding:28px;text-align:center;border:1px solid #b75b4d;background:rgba(70,28,27,.72);font-family:Arial,sans-serif}
.sort-button{display:inline-flex;padding:0;align-items:center;gap:7px;border:0;color:inherit;cursor:pointer;font:inherit;letter-spacing:inherit;text-align:inherit;text-transform:inherit;background:transparent}.num .sort-button{margin-left:auto}.sort-button:hover,.sort-button.active{color:var(--green-light)}.sort-symbol{display:inline-block;min-width:13px;color:var(--gold);font-size:14px;text-align:center}.sort-button.active .sort-symbol{color:var(--green-light);text-shadow:0 0 8px rgba(201,231,121,.55)}.position-number{display:inline-grid;width:34px;height:34px;place-items:center;border:1px solid rgba(216,180,92,.5);border-radius:50%;color:var(--gold-light);font-family:Georgia,"Times New Roman",serif;background:radial-gradient(circle,rgba(119,154,70,.2),rgba(30,24,27,.93))}

/* Account-Online-Status und Charakterklasse */
.account-name-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.online-status {
    display: inline-block;
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
}

.online-status.online {
    background: #68dc53;
    box-shadow:
        0 0 7px rgba(104, 220, 83, 0.95),
        0 0 15px rgba(104, 220, 83, 0.5);
}

.online-status.offline {
    background: #6d6867;
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.7);
}

.class-name {
    color: #e7d5ac;
    font-weight: 700;
}

/* Charakterstatus, Bereichsüberschrift und WoW-Klassenfarben */
.character-section-title {
    margin: 0 0 14px;
    color: var(--gold-light);
    font-size: 22px;
    font-weight: 400;
}

.status-column {
    width: 72px;
    text-align: center !important;
}

.characters .online-status {
    vertical-align: middle;
}

.class-name {
    display: inline-block;
    min-width: 106px;
    font-weight: 700;
}

.class-name.class-1 { color: #c79c6e; }  /* Krieger */
.class-name.class-2 { color: #f58cba; }  /* Paladin */
.class-name.class-3 { color: #abd473; }  /* Jäger */
.class-name.class-4 { color: #fff569; }  /* Schurke */
.class-name.class-5 { color: #ffffff; }  /* Priester */
.class-name.class-6 { color: #c41f3b; }  /* Todesritter */
.class-name.class-7 { color: #0070de; }  /* Schamane */
.class-name.class-8 { color: #69ccf0; }  /* Magier */
.class-name.class-9 { color: #9482c9; }  /* Hexenmeister */
.class-name.class-11 { color: #ff7d0a; } /* Druide */

/* Achievement-Anzeige */
.achievement-progress {
    min-width: 210px;
    color: #cfc6b8;
    white-space: nowrap;
}

.achievement-progress strong {
    color: var(--gold-light);
}

.achievement-progress span {
    color: var(--green-light);
    font-weight: 700;
}

.money-value {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    white-space: nowrap;
}

.money-part {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.money-number {
    color: #e7dbc4;

    font-variant-numeric: tabular-nums;
}

.coin {
    position: relative;

    display: inline-block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;

    border: 1px solid;
    border-radius: 50%;

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.55),
        inset 0 -2px 3px rgba(0, 0, 0, 0.38),
        0 1px 2px rgba(0, 0, 0, 0.65);
}

.coin::before {
    position: absolute;
    inset: 3px;

    border: 1px solid rgba(44, 28, 12, 0.4);
    border-radius: 50%;

    content: "";
}

.coin-gold {
    border-color: #8b6216;

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff2a6,
            #e4b83e 42%,
            #a66e13 76%,
            #68400b
        );

    box-shadow:
        inset 0 1px 2px rgba(255, 255, 220, 0.75),
        inset 0 -2px 3px rgba(91, 48, 3, 0.55),
        0 0 5px rgba(231, 183, 54, 0.35);
}

.coin-silver {
    border-color: #6c7478;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff,
            #cdd4d7 42%,
            #889398 76%,
            #596166
        );
}

.coin-copper {
    border-color: #70401f;

    background:
        radial-gradient(
            circle at 35% 30%,
            #f6c28e,
            #b96c37 43%,
            #81431f 76%,
            #512813
        );
}

.bank .money-value {
    justify-content: flex-start;
    margin-top: 5px;
}

.characters .money-value {
    justify-content: flex-end;
}

@media (max-width: 700px) {
    .achievement-progress {
        min-width: 190px;
    }
}