.ranking-section{max-width:1080px;margin:0 auto;padding:8px 0 80px;color:#f5f7fa}
.rank-shell{width:100%}
.rank-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:6px 0 22px;padding:0 2px}
.rank-head h2{margin:3px 0 5px;font-size:clamp(1.65rem,3vw,2.2rem);letter-spacing:-.03em}
.rank-head p{max-width:650px;margin:0;color:rgba(255,255,255,.58);font-size:.9rem;line-height:1.55}
.rank-kicker,.rank-card-label{display:block;color:#73da93;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.rank-periods{display:flex;gap:3px;flex:0 0 auto;padding:4px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.035)}
.rank-periods button{border:0;border-radius:10px;background:transparent;color:rgba(255,255,255,.58);font:600 .82rem Inter,sans-serif;padding:9px 13px;cursor:pointer}
.rank-periods button.active{background:#20b55a;color:#071d0f;box-shadow:0 5px 16px rgba(32,181,90,.22)}
.rank-summary-grid{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);gap:14px;margin-bottom:14px}
.rank-me-card,.rank-mode-card,.rank-list-card,.rank-awards-card{border:1px solid rgba(255,255,255,.085);border-radius:20px;background:linear-gradient(155deg,rgba(255,255,255,.052),rgba(255,255,255,.02));box-shadow:0 18px 45px rgba(0,0,0,.24)}
.rank-me-card{padding:22px;display:flex;flex-direction:column;justify-content:center;min-height:210px;background:radial-gradient(circle at 85% 15%,rgba(39,190,93,.16),transparent 48%),rgba(255,255,255,.035)}
.rank-place{font-family:'Barlow Condensed',Inter,sans-serif;font-size:4.3rem;line-height:.95;margin:14px 0 8px;letter-spacing:-.04em}
.rank-visit-count{font-size:.86rem;color:rgba(255,255,255,.68)}
.rank-visit-count b{color:#fff}
.rank-me-card p{margin:14px 0 0;color:rgba(255,255,255,.47);font-size:.8rem;line-height:1.45}
.rank-mode-card{padding:20px}
.rank-mode-head,.rank-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.rank-mode-head h3,.rank-card-heading h3{margin:5px 0 0;font-size:1.03rem}
.rank-mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:17px}
.rank-mode-option{min-width:0;text-align:left;border:1px solid rgba(255,255,255,.085);border-radius:13px;background:rgba(255,255,255,.025);color:#fff;padding:12px;cursor:pointer;transition:.18s ease}
.rank-mode-option strong{display:block;font-size:.79rem;margin-bottom:5px}
.rank-mode-option span{display:block;color:rgba(255,255,255,.45);font-size:.68rem;line-height:1.4}
.rank-mode-option:hover{border-color:rgba(70,211,112,.4);background:rgba(70,211,112,.055)}
.rank-mode-option.active{border-color:#35c76b;background:rgba(53,199,107,.1);box-shadow:inset 0 0 0 1px rgba(53,199,107,.15)}
.rank-mode-option:disabled{opacity:.55;cursor:wait}
.rank-save-note{min-height:17px;margin-top:8px;color:#9fdbb0;font-size:.72rem}
.rank-main-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:14px}
.rank-list-card,.rank-awards-card{padding:20px;min-width:0}
.rank-card-heading{padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.07)}
.rank-card-heading>span{color:rgba(255,255,255,.43);font-size:.73rem;white-space:nowrap}
.rank-list{display:flex;flex-direction:column}
.rank-row{display:grid;grid-template-columns:30px 42px minmax(0,1fr) auto;align-items:center;gap:11px;padding:11px 6px;border-bottom:1px solid rgba(255,255,255,.055)}
.rank-row:last-child{border-bottom:0}
.rank-row.is-me{margin:3px -5px;padding-left:11px;padding-right:11px;border:1px solid rgba(52,199,106,.28);border-radius:13px;background:rgba(52,199,106,.07)}
.rank-number{color:rgba(255,255,255,.5);font-weight:800;font-size:.83rem;text-align:center;font-variant-numeric:tabular-nums}
.rank-person{display:flex;flex-direction:column;min-width:0}
.rank-person strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem}
.rank-person small{color:#6ed68e;font-size:.65rem;margin-top:2px}
.rank-row-visits{display:flex;align-items:baseline;gap:4px;text-align:right;font-variant-numeric:tabular-nums}
.rank-row-visits strong{font-size:1rem}.rank-row-visits small{color:rgba(255,255,255,.42);font-size:.66rem}
.rank-profile-image{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;color:#fff;overflow:hidden;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 18px rgba(0,0,0,.2)}
.rank-profile-image img{display:block;width:100%;height:100%;object-fit:cover}
.rank-profile-image--fallback{background:linear-gradient(145deg,#45cf75,#0f7136);font-size:.78rem;font-weight:800;letter-spacing:.03em}
.rank-profile-image--anonymous{background:linear-gradient(145deg,#4b5563,#222831);box-shadow:none}
.rank-profile-image--anonymous>span{position:relative;width:16px;height:16px;border:2px solid rgba(255,255,255,.72);border-radius:50%}
.rank-profile-image--anonymous>span::after{content:'';position:absolute;left:50%;bottom:-8px;width:24px;height:12px;border:2px solid rgba(255,255,255,.72);border-bottom:0;border-radius:16px 16px 0 0;transform:translateX(-50%)}
.rank-empty,.rank-error{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 18px;color:rgba(255,255,255,.5)}
.rank-empty strong,.rank-error strong{color:#fff;margin-bottom:5px}.rank-empty span,.rank-error span{font-size:.8rem;line-height:1.5;max-width:390px}
.rank-error button{margin-top:14px;border:1px solid rgba(255,255,255,.15);border-radius:10px;background:rgba(255,255,255,.06);color:#fff;padding:9px 13px;cursor:pointer}
.rank-privacy-note{margin:12px 0 0;padding:10px 12px;border-radius:11px;background:rgba(255,255,255,.035);color:rgba(255,255,255,.45);font-size:.72rem}
.rank-award-list{display:flex;flex-direction:column;margin-top:5px}
.rank-award{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;padding:12px 3px;border-bottom:1px solid rgba(255,255,255,.055);opacity:.55}
.rank-award:last-child{border-bottom:0}.rank-award.is-earned{opacity:1}
.rank-award-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);font-family:'Barlow Condensed',sans-serif;font-size:.9rem;font-weight:800}
.rank-award.is-earned .rank-award-mark{background:rgba(50,197,104,.14);border-color:rgba(50,197,104,.32);color:#7ee39d}
.rank-award-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 8px;min-width:0}
.rank-award-copy strong{font-size:.83rem}.rank-award-copy small{grid-column:1/-1;color:rgba(255,255,255,.43);font-size:.68rem;line-height:1.4}
.rank-award-copy em{font-style:normal;color:rgba(255,255,255,.45);font-size:.65rem}.rank-award.is-earned em{color:#67d88c}
.rank-progress{height:4px;border-radius:5px;background:rgba(255,255,255,.07);overflow:hidden}.rank-progress i{display:block;height:100%;border-radius:5px;background:#40c871}
.rank-loading{padding:70px;text-align:center;color:rgba(255,255,255,.48)}
@media(max-width:820px){.rank-head{align-items:flex-start;flex-direction:column}.rank-summary-grid,.rank-main-grid{grid-template-columns:1fr}.rank-mode-options{grid-template-columns:1fr}.rank-me-card{min-height:165px}.rank-place{font-size:3.6rem}}
@media(max-width:600px){.ranking-section{padding:2px 0 60px}.rank-head{gap:15px;margin-bottom:14px}.rank-head p{font-size:.78rem}.rank-periods{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}.rank-periods button{min-width:0;padding:8px 4px;font-size:.72rem}.rank-me-card,.rank-mode-card,.rank-list-card,.rank-awards-card{border-radius:16px;padding:16px}.rank-mode-head{flex-direction:column}.rank-row{grid-template-columns:25px 38px minmax(0,1fr) auto;gap:8px;padding:9px 2px}.rank-profile-image{width:38px;height:38px}.rank-row-visits{flex-direction:column;align-items:flex-end;gap:0}}

/* Rangliste mobil kompakter (Fortschritt-Segment). */
@media (max-width: 600px) {
    .rank-shell { gap: 14px; }
    .rank-me-card, .rank-mode-card, .rank-list-card, .rank-awards-card { padding: 16px; }
    .rank-head h2 { font-size: 1.5rem; }
    .rank-place { font-size: 2.6rem; }
    .rank-mode-head h3, .rank-card-heading h3 { font-size: 1rem; }
}

/* ============================================================
   Ranglisten-Onboarding (blockierendes Erst-Besuch-Fenster) +
   kompakter Sichtbarkeits-Hinweis (Steuerung wohnt jetzt im Profil).
   ============================================================ */
.rank-visibility-note {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 14px; margin-top: 14px; padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .88rem; color: var(--text-secondary, rgba(255, 255, 255, .65));
}
.rank-visibility-note strong { color: #e6e9ee; }
.rank-visibility-note a { color: var(--accent-light, #22c55e); font-weight: 700; text-decoration: none; }
.rank-visibility-note a:hover { text-decoration: underline; }

body.rank-onboard-open { overflow: hidden; }
.rank-onboard {
    position: fixed; inset: 0; z-index: 1200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px; overflow-y: auto;
    background: rgba(8, 10, 15, .74);
    -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
    animation: rank-onboard-fade .2s ease;
}
@keyframes rank-onboard-fade { from { opacity: 0; } to { opacity: 1; } }
.rank-onboard-box {
    width: 100%; max-width: 440px; margin: auto;
    background: #141821; border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 20px; padding: 24px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    animation: rank-onboard-pop .24s cubic-bezier(.22, 1, .36, 1);
}
@keyframes rank-onboard-pop { from { transform: translateY(12px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.rank-onboard-kicker {
    display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .16em;
    text-transform: uppercase; color: var(--accent-light, #22c55e); margin-bottom: 8px;
}
.rank-onboard-box h2 { font-size: 1.5rem; margin: 0 0 10px; line-height: 1.15; }
.rank-onboard-box p { margin: 0; color: var(--text-secondary, rgba(255, 255, 255, .68)); font-size: .95rem; line-height: 1.5; }
.rank-onboard-q { margin-top: 18px !important; color: #e6e9ee !important; font-weight: 700; }
.rank-onboard-options { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; }
.rank-onboard-option {
    display: block; width: 100%; text-align: left; cursor: pointer;
    padding: 13px 15px; border-radius: 14px; min-height: 44px;
    background: rgba(255, 255, 255, .04); border: 1.5px solid rgba(255, 255, 255, .1);
    color: inherit; font-family: inherit; transition: border-color .15s, background .15s;
}
.rank-onboard-option:hover { background: rgba(255, 255, 255, .06); }
.rank-onboard-option strong { display: block; font-size: 1rem; color: #fff; margin-bottom: 3px; }
.rank-onboard-option span { display: block; font-size: .84rem; color: var(--text-secondary, rgba(255, 255, 255, .6)); line-height: 1.4; }
.rank-onboard-option.active { border-color: var(--accent-light, #22c55e); background: rgba(34, 197, 94, .12); }
.rank-onboard-hint { margin-top: 14px !important; font-size: .84rem !important; color: var(--text-secondary, rgba(255, 255, 255, .5)) !important; }
.rank-onboard-confirm {
    width: 100%; min-height: 50px; margin-top: 16px; border: none; border-radius: 13px; cursor: pointer;
    background: linear-gradient(135deg, var(--accent, #16a34a), var(--accent-light, #22c55e));
    color: #fff; font-family: inherit; font-size: 1rem; font-weight: 800;
    box-shadow: 0 8px 24px rgba(34, 197, 94, .3);
}
.rank-onboard-confirm:disabled { opacity: .45; cursor: default; box-shadow: none; }
.rank-onboard-err { margin-top: 10px; color: #fca5a5; font-size: .84rem; text-align: center; min-height: 1em; }
@media (max-width: 600px) {
    .rank-onboard { padding: 14px; align-items: flex-start; }
    .rank-onboard-box { padding: 20px 18px; border-radius: 18px; }
    .rank-onboard-box h2 { font-size: 1.3rem; }
}