.ranking-area{width:100%;margin:30px 0;padding:23px;border:1px solid rgba(222,194,138,.45);border-radius:17px;background:linear-gradient(145deg,#152e58,#07152f);box-shadow:0 20px 55px #0004}.ranking-area h2{font:normal clamp(25px,5vw,36px) Georgia,serif;margin:3px 0 10px;color:#f8e6b7}.ranking-eyebrow{font-size:11px;letter-spacing:.2em;color:#e8c979;font-weight:800}.ranking-caption{font-size:12px;color:#b4c9e5;line-height:1.7;margin-bottom:16px}.ranking-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.ranking-panel{background:#091930aa;border:1px solid #ceb58055;border-radius:12px;padding:14px}.ranking-panel h3{font-size:14px;color:#eed5a1;margin:0 0 13px}.ranking-list{list-style:none;padding:0;margin:0;display:grid;gap:7px}.ranking-row{display:flex;align-items:center;gap:8px;padding:9px;background:#19345a66;border:1px solid #b3c4e222;border-radius:8px}.ranking-place{color:#f2d8a2;font:18px Georgia;min-width:22px}.ranking-person{flex:1;min-width:0;display:flex;flex-direction:column}.ranking-person strong{font-size:12px;color:#fff1d6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking-person small{font-size:10px;color:#a9c0df}.ranking-score{text-align:right;color:#ffebb8;font:16px Georgia;white-space:nowrap}.ranking-score small{display:block;color:#b3c7e0;font:10px system-ui}.ranking-note{font-size:12px;color:#b5c9e5;line-height:1.6}.ranking-button{border:1px solid #e3bf75;border-radius:8px;background:linear-gradient(120deg,#f6e5b5,#d9b365);padding:10px 15px;color:#101c30;font-weight:800;font-size:12px;cursor:pointer}.ranking-button:disabled{opacity:.5}.ranking-entry{display:flex;flex-wrap:wrap;gap:8px}.ranking-input{background:#0c1c39;color:#fff3d4;border:1px solid #b9995d;border-radius:8px;padding:11px;min-width:145px;flex:1}.ranking-current{background:#102345;border:1px solid #e4c78077;border-radius:12px;padding:18px;margin:20px 0}.ranking-current h3{margin:0 0 6px;color:#f3d490;font:27px Georgia}.ranking-current p{margin:0 0 14px;color:#c4d4e9}.ranking-current label{display:block;color:#eed5a1;font-size:12px;margin-bottom:8px}.ranking-submit-status{color:#e8d49d;font-size:12px;min-height:20px;margin-top:10px}@media(max-width:680px){.ranking-grid{grid-template-columns:1fr}.ranking-area{padding:17px}}
/* RANGLISTE: HELLES WEISS UND GOLD */
.ranking-area h2,.ranking-person strong{color:#fffdf7;}
.ranking-caption,.ranking-note,.ranking-person small{color:#e0eafa;}
.ranking-panel h3,.ranking-eyebrow,.ranking-place{color:#f1d58f;}
.ranking-score{color:#fff0c5;}
.ranking-score small{color:#ccdbf0;}
.ranking-input{color:#fffefa;}
.ranking-current h3{color:#f1d58f;}
.ranking-current p{color:#e0eafa;}
.ranking-current label{color:#f1d58f;}
.ranking-submit-status{color:#ffe6aa;}
.ranking-button{background:linear-gradient(123deg,#fff2d0 0%,#f1d791 46%,#e2b458 100%);border-color:#f7df9a;color:#101c30;}
.ranking-button:hover:not(:disabled){background:linear-gradient(123deg,#fff8e4 0%,#f6dfa5 48%,#eac272 100%);}

/* Sechs individuelle Wissensränge: Badge und dezente eigene Akzentfarbe. */
.rank-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:19px 0 16px}
.rank-level{display:flex;gap:10px;align-items:center;border:1px solid color-mix(in srgb,var(--tier-color) 48%,transparent);border-radius:12px;background:linear-gradient(145deg,rgba(25,55,104,.70),rgba(7,21,48,.75));padding:11px 9px;min-width:0}
.rank-level-medal,.ranking-medal{display:grid;place-items:center;flex-shrink:0;border-radius:50%;border:1px solid var(--tier-color);background:#0b2046;color:var(--tier-color);font:24px Georgia,serif;width:41px;height:41px}
.rank-level-description{display:flex;flex-direction:column;gap:4px;min-width:0}
.rank-level-description strong{font:700 13px/1.35 system-ui,sans-serif;color:var(--tier-color);overflow-wrap:normal;word-break:normal;hyphens:none}
.rank-level-description small{font-size:10px;line-height:1.5;color:#e0eafa}
.ranking-medal{font-size:19px;width:29px;height:29px}
@media(max-width:760px){.rank-levels{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){.rank-level{padding:9px 7px;gap:7px}.rank-level-medal{width:34px;height:34px;font-size:19px}}

/* Smartphone: vollstaendige Rangnamen statt Trennungen mitten im Wort. */
@media (max-width: 560px) {
  .rank-levels {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .rank-level {
    gap: 13px;
    padding: 13px 14px;
  }
  .rank-level-medal {
    width: 42px;
    height: 42px;
  }
  .rank-level-description strong {
    font-size: 14px;
    line-height: 1.4;
  }
  .rank-level-description small {
    font-size: 11px;
    line-height: 1.55;
  }
}