/*
    Public Pages Upgrade
    - Ergänzt mobile Navigation.
    - Schärft Rating-, FAQ-, News- und Legal-Layouts.
    - Liegt bewusst separat, damit public.css nicht unnötig riskiert wird.
*/

.mobile-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: var(--cir-text);
    background: rgba(8, 18, 34, 0.86);
    font-weight: 900;
    cursor: pointer;
}

.mobile-menu-toggle-lines,
.mobile-menu-toggle-lines::before,
.mobile-menu-toggle-lines::after {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.mobile-menu-toggle-lines {
    position: relative;
}

.mobile-menu-toggle-lines::before,
.mobile-menu-toggle-lines::after {
    content: "";
    position: absolute;
    left: 0;
}

.mobile-menu-toggle-lines::before {
    top: -6px;
}

.mobile-menu-toggle-lines::after {
    top: 6px;
}

.mobile-menu {
    width: calc(100% - 32px);
    margin: 0 auto 14px;
    padding: 12px;
    display: grid;
    gap: 8px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(19, 35, 55, 0.97), rgba(5, 12, 22, 0.98));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.mobile-menu[hidden] {
    display: none;
}

.mobile-menu a {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--cir-muted);
    font-weight: 850;
    text-decoration: none;
    background: rgba(3, 10, 22, 0.36);
    border: 1px solid rgba(148, 163, 184, 0.08);
}

.mobile-menu a.active,
.mobile-menu a:hover {
    color: var(--cir-text);
    border-color: rgba(242, 184, 75, 0.26);
}

.mobile-menu .mobile-menu-action {
    color: var(--cir-text);
    background: rgba(242, 184, 75, 0.12);
    border-color: rgba(242, 184, 75, 0.22);
}

.fairplay-panel,
.fairplay-wide {
    border-color: rgba(34, 197, 94, 0.26) !important;
    background:
        radial-gradient(circle at 85% 10%, rgba(34, 197, 94, 0.18), transparent 34%),
        linear-gradient(180deg, rgba(19, 35, 55, 0.90), rgba(5, 12, 22, 0.94)) !important;
}

.rating-current-future {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr);
    gap: 14px;
    margin-top: 8px;
}

.rating-current-future > div {
    padding: 14px;
    border-radius: 16px;
    background: rgba(3, 10, 22, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.rating-current-future strong {
    display: block;
    margin-bottom: 7px;
    color: #f3f7ff;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rating-current-future p {
    margin: 0;
}

.beta-transparency .info-card {
    min-height: 132px;
}

.faq-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 1.25vw, 22px);
}

.faq-card {
    padding: clamp(18px, 1.25vw, 24px);
}

.faq-card h2 {
    margin-top: 0;
    font-size: clamp(1.1rem, 1.08vw, 1.45rem);
    line-height: 1.15;
}

.faq-card p {
    margin-bottom: 0;
}

.news-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.55fr);
    gap: clamp(16px, 1.4vw, 26px);
}

.news-featured {
    padding: clamp(22px, 1.7vw, 34px);
    background:
        radial-gradient(circle at 85% 20%, rgba(168, 85, 247, 0.20), transparent 36%),
        linear-gradient(180deg, rgba(19, 35, 55, 0.88), rgba(5, 12, 22, 0.94));
}

.news-featured h2 {
    margin-top: 14px;
    font-size: clamp(1.55rem, 1.9vw, 2.5rem);
}

.news-side {
    padding: clamp(18px, 1.25vw, 24px);
}

.news-category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.news-category-list span {
    padding: 7px 10px;
    border-radius: 999px;
    color: rgba(226, 232, 240, 0.9);
    background: rgba(94, 130, 170, 0.12);
    border: 1px solid rgba(140, 176, 215, 0.16);
    font-size: 0.8rem;
    font-weight: 850;
}

.news-timeline {
    display: grid;
    gap: 14px;
}

.news-timeline-item {
    padding: clamp(18px, 1.25vw, 24px);
}

.news-timeline-item h3 {
    margin: 12px 0 8px;
}

.legal-document {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    padding: clamp(22px, 1.8vw, 36px);
}

.legal-document h2 {
    margin-top: 26px;
}

.legal-document h2:first-child {
    margin-top: 0;
}

.legal-document p {
    line-height: 1.65;
}

@media (max-width: 980px) {
    .rating-current-future,
    .faq-card-grid,
    .news-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .site-header {
        grid-template-columns: 1fr auto !important;
        gap: 12px !important;
        align-items: center;
    }

    .site-header .main-nav,
    .site-header .desktop-actions {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: inline-flex;
    }

    .mobile-menu-toggle-text {
        display: none;
    }

    .brand-text strong {
        font-size: 0.95rem;
    }

    .rating-explain-card {
        min-height: auto;
    }

    .rating-current-future > div {
        padding: 12px;
    }

    .faq-card,
    .news-featured,
    .news-side,
    .news-timeline-item,
    .legal-document {
        padding: 16px;
    }
}

/* ---------- Compact subpage density override ---------- */

/*
    Ziel:
    - Unterseiten optisch näher an die Startseite bringen.
    - Weniger unnötige Höhe bei Kacheln.
    - Rating auf Desktop kompakter als 2x2-Grid.
    - Mobile bleibt weiterhin einspaltig und sauber lesbar.
*/

.hero.page-hero {
    min-height: 236px;
    padding: clamp(20px, 2vw, 36px);
    margin-bottom: clamp(12px, 1.2vw, 20px);
}

.hero.page-hero .hero-copy h1 {
    font-size: clamp(2.35rem, 3vw, 3.65rem);
    line-height: 0.96;
}

.hero.page-hero .hero-lead {
    max-width: 720px;
    margin-top: 10px;
    font-size: clamp(0.9rem, 0.78vw, 1rem);
    line-height: 1.42;
}

.page-hero-panel,
.hero.page-hero > .panel,
.hero.page-hero > .pillar-panel {
    max-width: 500px;
    padding: clamp(16px, 1.2vw, 22px);
}

.page-hero-panel h2,
.hero.page-hero > .panel h2,
.hero.page-hero > .pillar-panel h2 {
    font-size: clamp(1.15rem, 1.18vw, 1.55rem);
}

.subpage-section {
    padding-top: clamp(10px, 0.95vw, 18px);
    padding-bottom: clamp(10px, 0.95vw, 18px);
}

.subpage-section .section-header {
    margin-bottom: clamp(10px, 0.9vw, 16px);
}

.subpage-section .section-header h2 {
    font-size: clamp(1.35rem, 1.48vw, 1.95rem);
}

.subpage-section .section-header p {
    max-width: 780px;
    line-height: 1.38;
}

.subpage-section .info-card,
.subpage-section .step-card,
.subpage-section .panel,
.subpage-section.panel,
.subpage-panel,
.faq-card,
.news-featured,
.news-side,
.news-timeline-item {
    padding: clamp(14px, 1vw, 20px);
}

.subpage-section .info-card,
.step-card,
.beta-transparency .info-card {
    min-height: 104px;
}

.subpage-section .info-card p,
.subpage-section .step-card p,
.subpage-section .panel p,
.faq-card p,
.news-featured p,
.news-timeline-item p {
    font-size: 0.92rem;
    line-height: 1.38;
}

.subpage-section .info-card h3,
.subpage-section .step-card h3,
.faq-card h2,
.news-timeline-item h3 {
    margin-bottom: 7px;
}

.icon-badge-img {
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 7px;
    border-radius: 11px;
}

.subpage-section .info-card .icon-badge-img {
    margin-bottom: 12px;
}

.panel-title-row {
    margin-bottom: 9px;
}

/* Rating kompakter: Desktop 2x2 statt 4 riesige Zeilen. */
.rating-explain-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1vw, 18px);
}

.rating-explain-card {
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: flex-start;
    min-height: 0;
    padding: clamp(15px, 1.05vw, 22px);
    border-radius: 18px;
    gap: clamp(12px, 1vw, 18px);
}

.rating-explain-card h3 {
    margin: 2px 0 8px;
    font-size: clamp(1.18rem, 1.12vw, 1.52rem);
}

.rating-explain-card p {
    max-width: none;
    font-size: 0.9rem;
    line-height: 1.36;
}

.rating-explain-icon {
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 4px;
}

.rating-explain-icon .icon-badge-img {
    width: 52px;
    height: 52px;
    min-width: 52px;
    padding: 11px;
    border-radius: 16px;
}

.rating-current-future {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 6px;
}

.rating-current-future > div {
    padding: 10px 12px;
    border-radius: 12px;
}

.rating-current-future strong {
    margin-bottom: 5px;
    font-size: 0.72rem;
}

.rating-chip-row {
    gap: 6px;
    margin-top: 10px;
}

.rating-chip-row span,
.news-category-list span {
    min-height: 22px;
    padding: 4px 8px;
    font-size: 0.68rem;
}

.rating-intro-grid,
.rating-role-grid,
.news-layout {
    gap: clamp(12px, 1vw, 18px);
}

.rating-intro-main,
.rating-intro-side {
    padding: clamp(16px, 1.1vw, 22px);
}

.rating-role-grid .panel {
    min-height: 128px;
}

/* FAQ kompakter und näher an Startseiten-Kacheln. */
.faq-card-grid {
    gap: clamp(12px, 1vw, 18px);
}

.faq-card h2 {
    font-size: clamp(1.02rem, 0.98vw, 1.26rem);
}

/* News kompakter. */
.news-featured h2 {
    margin-top: 10px;
    font-size: clamp(1.32rem, 1.48vw, 2rem);
}

.news-category-list {
    margin-top: 10px;
}

.news-timeline {
    gap: 10px;
}

/* Status kompakter. */
.status-grid-refined {
    gap: 10px;
}

.status-grid-refined .status-card {
    min-height: 58px;
    padding: 11px 14px;
    border-radius: 14px;
}

.status-grid-refined .status-card .icon-badge-img {
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 6px;
}

/* Download/Steps kompakter. */
.step-card {
    min-height: 112px;
}

.step-card-head {
    margin-bottom: 10px;
}

.step-number {
    width: 26px;
    height: 26px;
    font-size: 0.85rem;
}

/* Legal nicht zu breit/hoch. */
.legal-document {
    max-width: 900px;
    padding: clamp(18px, 1.35vw, 28px);
}

.legal-document h2 {
    margin-top: 20px;
}

/* 1080p: nochmal etwas dichter, damit weniger Scroll entsteht. */
@media (max-height: 940px) and (min-width: 1100px) {
    .hero.page-hero {
        min-height: 212px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-bottom: 12px;
    }

    .hero.page-hero .hero-copy h1 {
        font-size: clamp(2.15rem, 2.75vw, 3.25rem);
    }

    .subpage-section {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .rating-explain-card {
        padding: 14px;
    }

    .rating-explain-icon .icon-badge-img {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }

    .rating-explain-card p {
        font-size: 0.86rem;
    }

    .rating-current-future > div {
        padding: 9px 10px;
    }
}

/* Tablet/Mobile: einspaltig, aber nicht riesig. */
@media (max-width: 980px) {
    .rating-explain-stack {
        grid-template-columns: 1fr;
    }

    .rating-explain-card {
        grid-template-columns: 52px minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .hero.page-hero {
        padding-top: 24px;
        padding-bottom: 22px;
    }

    .hero.page-hero .hero-copy h1 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .rating-explain-card {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .rating-explain-icon .icon-badge-img {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .rating-current-future {
        gap: 7px;
    }

    .subpage-section .info-card,
    .subpage-section .step-card,
    .subpage-section .panel,
    .faq-card,
    .news-featured,
    .news-side,
    .news-timeline-item {
        padding: 14px;
    }
}

/* ---------- /Compact subpage density override ---------- */

/* ---------- Rating slim redesign ---------- */

.rating-slim-hero {
    min-height: 235px;
}

.rating-slim-hero .hero-copy h1 {
    max-width: 760px;
}

.rating-slim-fairplay {
    max-width: 460px;
}

.rating-slim-section {
    padding-top: 14px;
    padding-bottom: 14px;
}

.rating-slim-grid {
    width: var(--cir-page-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.rating-slim-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    min-height: 172px;
    padding: 16px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(19, 35, 55, 0.88), rgba(5, 12, 22, 0.92));
    border: 1px solid rgba(120, 156, 190, 0.18);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}

.rating-slim-card .icon-badge-img {
    width: 46px;
    height: 46px;
    min-width: 46px;
    padding: 10px;
    border-radius: 14px;
}

.rating-slim-card h2 {
    margin: 4px 0 8px;
    font-size: 1.16rem;
    line-height: 1.08;
}

.rating-slim-card p {
    margin: 0;
    color: var(--cir-muted);
    font-size: 0.86rem;
    line-height: 1.36;
}

.rating-slim-card .rating-chip-row {
    margin-top: 11px;
}

.rating-slim-bottom {
    width: var(--cir-page-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-top: 8px;
}

.rating-slim-note {
    padding: 16px;
    min-height: 120px;
}

.rating-slim-note h2 {
    margin: 6px 0 8px;
    font-size: 1.18rem;
}

.rating-slim-note p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.38;
}

/* Alte große Rating-Struktur aus vorherigem Patch auf Rating-Seite praktisch neutralisieren. */
.rating-explain-stack,
.rating-current-future,
.beta-transparency {
    max-width: none;
}

@media (max-width: 1280px) {
    .rating-slim-grid {
        width: calc(100% - 32px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rating-slim-bottom {
        width: calc(100% - 32px);
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .rating-slim-grid {
        width: 100%;
        grid-template-columns: 1fr;
        padding-left: 16px;
        padding-right: 16px;
    }

    .rating-slim-card {
        min-height: auto;
    }

    .rating-slim-bottom {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ---------- /Rating slim redesign ---------- */

/* ---------- Rating detailed explanation cards ---------- */

.rating-detail-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.rating-detail-card {
    grid-template-columns: 50px minmax(0, 1fr);
    min-height: 0;
    align-items: flex-start;
}

.rating-detail-card h2 {
    margin-bottom: 10px;
}

.rating-mini-block {
    margin-top: 9px;
    padding: 9px 10px;
    border-radius: 10px;
    background: rgba(3, 10, 22, 0.28);
    border: 1px solid rgba(148, 163, 184, 0.09);
}

.rating-mini-block strong {
    display: block;
    margin-bottom: 4px;
    color: rgba(243, 247, 255, 0.94);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rating-mini-block p {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.34;
}

.rating-mini-block.muted {
    background: rgba(94, 130, 170, 0.07);
}

.rating-mini-block.muted strong {
    color: rgba(242, 184, 75, 0.92);
}

.rating-detail-card .rating-chip-row {
    margin-top: 10px;
}

@media (max-height: 940px) and (min-width: 1100px) {
    .rating-detail-card {
        min-height: 0;
    }

    .rating-mini-block {
        margin-top: 7px;
        padding: 8px 9px;
    }

    .rating-mini-block p {
        font-size: 0.8rem;
        line-height: 1.3;
    }
}

@media (max-width: 980px) {
    .rating-detail-cards {
        grid-template-columns: 1fr;
    }

    .rating-detail-card {
        min-height: auto;
    }
}

/* ---------- /Rating detailed explanation cards ---------- */

/* ---------- Rating language style update ---------- */

.rating-principle-section {
    width: var(--cir-page-width);
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 8px;
}

.rating-principle-card {
    padding: 16px 18px;
    min-height: 108px;
    border-color: rgba(242, 184, 75, 0.24);
}

.rating-principle-card h2 {
    margin: 5px 0 8px;
    font-size: clamp(1.22rem, 1.22vw, 1.62rem);
    line-height: 1.1;
}

.rating-principle-card p {
    margin: 0;
    max-width: 1120px;
    color: var(--cir-muted);
    font-size: 0.92rem;
    line-height: 1.42;
}

.rating-main-text {
    margin: 0;
    color: var(--cir-muted);
    font-size: 0.95rem;
    line-height: 1.46;
}

.rating-closing-text {
    margin-top: 10px;
}

.rating-value-list {
    margin-top: 12px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(3, 10, 22, 0.30);
    border: 1px solid rgba(148, 163, 184, 0.11);
}

.rating-value-list > strong {
    display: block;
    margin-bottom: 9px;
    color: rgba(242, 184, 75, 0.95);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.rating-value-list dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 0;
}

.rating-value-list dl > div {
    min-width: 0;
}

.rating-value-list dt {
    margin: 0 0 3px;
    color: rgba(243, 247, 255, 0.94);
    font-size: 0.84rem;
    font-weight: 900;
}

.rating-value-list dd {
    margin: 0;
    color: var(--cir-muted);
    font-size: 0.84rem;
    line-height: 1.38;
}

.rating-detail-card.rating-damage {
    min-height: 0;
}

@media (max-height: 940px) and (min-width: 1100px) {
    .rating-value-list {
        padding: 10px;
    }

    .rating-value-list dl {
        gap: 7px 10px;
    }

    .rating-value-list dd {
        font-size: 0.75rem;
        line-height: 1.28;
    }
}

@media (max-width: 1280px) {
    .rating-principle-section {
        width: calc(100% - 32px);
    }
}

@media (max-width: 760px) {
    .rating-principle-section {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .rating-value-list dl {
        grid-template-columns: 1fr;
    }
}

/* ---------- /Rating language style update ---------- */

/* ---------- Rating uncluttered accordion layout ---------- */

/*
    Ziel:
    - Die Rating-Seite soll nicht wie ein Whitepaper aussehen.
    - Erst kurze Säulen-Erklärung zeigen.
    - Detailwerte nur bei Bedarf aufklappen.
*/

.rating-detail-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.rating-detail-card {
    grid-template-columns: 46px minmax(0, 1fr);
    min-height: 214px;
    padding: 16px;
}

.rating-detail-card h2 {
    margin: 3px 0 9px;
    font-size: 1.14rem;
}

.rating-main-text {
    font-size: 0.92rem;
    line-height: 1.42;
}

.rating-value-list {
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: transparent;
}

.rating-value-details summary {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    color: #f3f7ff;
    background: rgba(94, 130, 170, 0.14);
    border: 1px solid rgba(140, 176, 215, 0.20);
    font-size: 0.78rem;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.rating-value-details summary::-webkit-details-marker {
    display: none;
}

.rating-value-details summary::after {
    content: "+";
    color: var(--cir-gold);
    font-weight: 1000;
}

.rating-value-details[open] summary::after {
    content: "−";
}

.rating-value-details dl {
    margin-top: 10px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(3, 10, 22, 0.34);
    border: 1px solid rgba(148, 163, 184, 0.11);
    grid-template-columns: 1fr;
    gap: 8px;
}

.rating-value-list dt {
    font-size: 0.82rem;
}

.rating-value-list dd {
    font-size: 0.82rem;
    line-height: 1.34;
}

.rating-principle-card {
    min-height: auto;
}

/* Bei schmaleren Desktops wieder 2 Spalten, damit nichts gequetscht wirkt. */
@media (max-width: 1500px) {
    .rating-detail-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rating-detail-card {
        min-height: 190px;
    }
}

@media (max-width: 980px) {
    .rating-detail-cards {
        grid-template-columns: 1fr;
    }

    .rating-detail-card {
        min-height: auto;
    }
}

/* ---------- /Rating uncluttered accordion layout ---------- */

/* ---------- Rating floating popover ---------- */

/*
    Ziel:
    - "Genutzte Werte anzeigen" öffnet eine schwebende Infobox
    - kein Nach-unten-Schieben mehr
    - funktioniert wie ein Popover / großer Tooltip
*/

.rating-slim-section,
.rating-detail-cards,
.rating-detail-card,
.rating-detail-card > div {
    overflow: visible;
}

.rating-detail-card {
    position: relative;
    z-index: 1;
}

.rating-detail-card:hover,
.rating-detail-card:focus-within,
.rating-detail-card:has(.rating-value-details[open]) {
    z-index: 30;
}

.rating-value-details {
    position: relative;
    display: block;
    overflow: visible;
}

.rating-value-details summary {
    position: relative;
    z-index: 2;
}

.rating-value-details dl {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: min(560px, calc(100vw - 96px));
    max-height: min(58vh, 560px);
    overflow: auto;
    margin-top: 0;
    padding: 14px 14px 12px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(7, 18, 38, 0.985) 0%, rgba(4, 11, 25, 0.985) 100%);
    border: 1px solid rgba(132, 170, 214, 0.16);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(255,255,255,0.02) inset;
    grid-template-columns: 1fr;
    gap: 10px;
    backdrop-filter: blur(8px);
}

.rating-value-details dl > div {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(132, 170, 214, 0.08);
}

.rating-value-details dl > div:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.rating-value-list dt {
    margin: 0 0 4px;
    color: rgba(243, 247, 255, 0.97);
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.2;
}

.rating-value-list dd {
    margin: 0;
    color: var(--cir-muted);
    font-size: 0.88rem;
    line-height: 1.44;
}

.rating-value-details summary {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 0.8rem;
}

.rating-value-details summary::after {
    margin-left: 2px;
}

/* damit lange Popover rechts nicht abgeschnitten wirken */
.rating-detail-card:nth-child(2n) .rating-value-details dl {
    left: auto;
    right: 0;
}

/* mobile: lieber normal untereinander statt halb aus dem screen */
@media (max-width: 980px) {
    .rating-detail-card:nth-child(2n) .rating-value-details dl {
        right: auto;
        left: 0;
    }

    .rating-value-details dl {
        width: min(100%, calc(100vw - 48px));
        max-height: 52vh;
    }
}

@media (max-width: 760px) {
    .rating-value-details dl {
        width: calc(100vw - 56px);
        left: 0;
        right: auto;
    }
}

/* ---------- /Rating floating popover ---------- */

/* ---------- Home feature cleanup ---------- */

/*
    Startseite:
    - Die oberen Feature-Kacheln brauchen kein "Mehr erfahren".
    - Der ausführlichere Link bleibt im Bereich "Warum CIR?".
*/

.feature-grid .feature-card a {
    display: none;
}

.feature-grid .feature-card p {
    margin-bottom: 0;
}

/* Etwas ruhigerer Umbruch bei den neuen Trust-Tags. */
.trust-row span {
    white-space: nowrap;
}

/* Mobile darf trotzdem umbrechen. */
@media (max-width: 760px) {
    .trust-row span {
        white-space: normal;
    }
}

/* ---------- /Home feature cleanup ---------- */

/* ---------- Rating model artwork ---------- */

/*
    Nutzt die CIR-Modellbilder dezent:
    - Übersicht als Rating-Hero-Bild
    - Säulenbilder als schwache Hintergrundmotive in den Karten
    - kein zusätzlicher Layout-Block, kein extra Scroll
*/

.page-hero-rating {
    --page-hero-image: url("/static/public/assets/models/cir_saeulen_overview.png");
    --page-hero-position: center 54%;
    --page-hero-opacity: 0.48;
    --page-glow-x: 72%;
    --page-glow-y: 32%;
    --page-accent-glow: rgba(242, 184, 75, 0.16);
}

.rating-detail-card {
    position: relative;
    isolation: isolate;
}

.rating-detail-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(240px, 34%);
    z-index: -1;
    pointer-events: none;
    background-image: var(--rating-pillar-art);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    opacity: 0.16;
    filter: saturate(1.08) contrast(1.04);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.72) 42%, black 100%);
}

.rating-detail-card.rating-damage {
    --rating-pillar-art: url("/static/public/assets/models/saeule_schadenseffizienz_orange.png");
    border-color: rgba(249, 115, 22, 0.28);
}

.rating-detail-card.rating-defense {
    --rating-pillar-art: url("/static/public/assets/models/saeule_panzereffizienz_gold.png");
    border-color: rgba(242, 184, 75, 0.28);
}

.rating-detail-card.rating-support {
    --rating-pillar-art: url("/static/public/assets/models/saeule_assist_gruen.png");
    border-color: rgba(34, 197, 94, 0.24);
}

.rating-detail-card.rating-activity {
    --rating-pillar-art: url("/static/public/assets/models/saeule_taktik_blau.png");
    border-color: rgba(56, 189, 248, 0.26);
}

/* Popover muss immer über dem Hintergrundbild liegen. */
.rating-value-details dl {
    z-index: 80;
}

/* Mobile: Bildmotive ausblenden, damit Text lesbar bleibt. */
@media (max-width: 760px) {
    .rating-detail-card::after {
        display: none;
    }

    .page-hero-rating {
        --page-hero-opacity: 0.28;
        --page-hero-position: center center;
    }
}

/* ---------- /Rating model artwork ---------- */

/* ---------- FAQ and privacy upgrade ---------- */

.faq-card-grid-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.faq-card-grid-expanded .faq-card {
    min-height: 92px;
    padding: 15px 17px;
}

.faq-card-grid-expanded .faq-card h2 {
    margin: 0 0 7px;
    font-size: 1.02rem;
    line-height: 1.18;
}

.faq-card-grid-expanded .faq-card p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.38;
}

.privacy-document {
    display: grid;
    gap: 0;
}

.privacy-document h2 {
    margin: 24px 0 8px;
    color: var(--cir-white);
    font-size: clamp(1.08rem, 1.05vw, 1.34rem);
    line-height: 1.2;
}

.privacy-document h2:first-child {
    margin-top: 0;
}

.privacy-document p {
    max-width: 1060px;
    margin: 0 0 10px;
    color: var(--cir-muted);
    font-size: 0.94rem;
    line-height: 1.58;
}

.privacy-document a {
    word-break: break-word;
}

@media (max-width: 900px) {
    .faq-card-grid-expanded {
        grid-template-columns: 1fr;
    }

    .faq-card-grid-expanded .faq-card {
        min-height: auto;
    }

    .privacy-document p {
        font-size: 0.9rem;
    }
}

/* ---------- /FAQ and privacy upgrade ---------- */

/* CIR account connection status.
   Visible but controlled state tint:
   green = connected, red = not connected. */
.cir-auth-status-panel {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
    transition:
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease !important;
}

.cir-auth-status-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

.cir-auth-status-panel::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    height: 4px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.cir-auth-status-panel > * {
    position: relative !important;
    z-index: 2 !important;
}

/* Connected: visibly green, still dark and premium. */
.cir-auth-status-panel.is-connected {
    border-color: rgba(74, 222, 128, 0.78) !important;
    background:
        radial-gradient(circle at 80% 10%, rgba(74, 222, 128, 0.28), transparent 38%),
        linear-gradient(135deg, rgba(20, 83, 45, 0.40), rgba(8, 18, 34, 0.94) 62%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(74, 222, 128, 0.18),
        0 0 38px rgba(34, 197, 94, 0.22),
        0 22px 60px rgba(0, 0, 0, 0.36) !important;
}

.cir-auth-status-panel.is-connected::before {
    background:
        linear-gradient(90deg, rgba(74, 222, 128, 0.20), transparent 58%),
        radial-gradient(circle at 0% 0%, rgba(74, 222, 128, 0.18), transparent 40%) !important;
}

.cir-auth-status-panel.is-connected::after {
    background: linear-gradient(90deg, rgba(74, 222, 128, 1), rgba(74, 222, 128, 0.12)) !important;
}

.cir-auth-status-panel.is-connected .eyebrow {
    color: #9df7b1 !important;
}

.cir-auth-status-panel.is-connected h2 {
    color: #f2fff6 !important;
}

.cir-auth-status-panel.is-connected .btn,
.cir-auth-status-panel.is-connected .btn-outline {
    border-color: rgba(74, 222, 128, 0.62) !important;
    background: rgba(20, 83, 45, 0.24) !important;
    color: #f4fff7 !important;
}

/* Disconnected: visibly red, but not alarm-style. */
.cir-auth-status-panel.is-disconnected {
    border-color: rgba(248, 113, 113, 0.74) !important;
    background:
        radial-gradient(circle at 80% 10%, rgba(248, 113, 113, 0.26), transparent 38%),
        linear-gradient(135deg, rgba(127, 29, 29, 0.36), rgba(8, 18, 34, 0.94) 62%) !important;
    box-shadow:
        inset 0 0 0 1px rgba(248, 113, 113, 0.16),
        0 0 38px rgba(185, 28, 28, 0.20),
        0 22px 60px rgba(0, 0, 0, 0.36) !important;
}

.cir-auth-status-panel.is-disconnected::before {
    background:
        linear-gradient(90deg, rgba(248, 113, 113, 0.18), transparent 58%),
        radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.16), transparent 40%) !important;
}

.cir-auth-status-panel.is-disconnected::after {
    background: linear-gradient(90deg, rgba(248, 113, 113, 0.96), rgba(248, 113, 113, 0.10)) !important;
}

.cir-auth-status-panel.is-disconnected .eyebrow {
    color: #ffaaaa !important;
}

.cir-auth-status-panel.is-disconnected h2 {
    color: #fff5f5 !important;
}

.cir-auth-status-panel.is-disconnected #cir-auth-status-actions .btn {
    border: 1px solid rgba(248, 113, 113, 0.62) !important;
    background: rgba(127, 29, 29, 0.22) !important;
    color: #fff7f7 !important;
    box-shadow: none !important;
}

/* Header connected pill. */
.cir-nav-connected {
    border-color: rgba(74, 222, 128, 0.60) !important;
    background:
        radial-gradient(circle at 15% 50%, rgba(74, 222, 128, 0.24), transparent 28%),
        linear-gradient(135deg, rgba(22, 101, 52, 0.34), rgba(8, 18, 34, 0.72)) !important;
    color: #f1fff5 !important;
}

.cir-nav-connected::before {
    content: "";
    display: inline-block;
    width: 0.58em;
    height: 0.58em;
    margin-right: 0.55em;
    border-radius: 999px;
    background: #6ee787;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.55);
    vertical-align: 0.02em;
}

/* Anti-flicker for auth-dependent UI.
   Prevents header/buttons from jumping when /api/public/v1/auth/me resolves. */
html.cir-auth-pending a[href^="/auth/wargaming/login"],
html.cir-auth-pending a[href^="/auth/wargaming/logout"],
html.cir-auth-pending .cir-nav-connect,
html.cir-auth-pending .cir-nav-connected {
    visibility: hidden;
}

/* Keep enough reserved space for "Konto verbinden" and "Verbunden". */
.cir-nav-connect,
.cir-nav-connected {
    min-width: 132px;
    justify-content: center;
    text-align: center;
}

/* Keep hero auth button width stable when it switches login/logout. */
.hero-actions a[href^="/auth/wargaming/login"],
.hero-actions a[href^="/auth/wargaming/logout"],
.cir-auth-login-action,
.cir-auth-logout-action {
    min-width: 190px;
    justify-content: center;
    text-align: center;
}

/* Avoid visible text morphing during auth state correction. */
html.cir-auth-ready a[href^="/auth/wargaming/login"],
html.cir-auth-ready a[href^="/auth/wargaming/logout"],
html.cir-auth-ready .cir-nav-connect,
html.cir-auth-ready .cir-nav-connected {
    transition:
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease;
}

/* Auth CTA anti-flicker.
   Prevents "Konto verbinden" from flashing before JS resolves the real login state. */
a[data-cir-auth-cta] {
    min-width: 132px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

html.cir-auth-pending a[data-cir-auth-cta] {
    opacity: 0;
    pointer-events: none;
}

html.cir-auth-ready a[data-cir-auth-cta] {
    opacity: 1;
    transition:
        opacity 120ms ease,
        background-color 140ms ease,
        border-color 140ms ease,
        color 140ms ease,
        box-shadow 140ms ease;
}


/* Final auth anti-flicker.
   The auth CTA keeps its width and is corrected from localStorage before the API check returns. */
a[data-cir-auth-cta],
.cir-nav-connect,
.cir-nav-connected {
    min-width: 132px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

/* Hide only while there is no cached state yet. */
html.cir-auth-pending:not(.cir-auth-cached-connected):not(.cir-auth-cached-disconnected) a[data-cir-auth-cta] {
    opacity: 0;
    pointer-events: none;
}

/* Auth action buttons keep stable width when switching login/logout. */
.hero-actions a[href^="/auth/wargaming/login"],
.hero-actions a[href^="/auth/wargaming/logout"],
.cir-auth-login-action,
.cir-auth-logout-action {
    min-width: 190px;
    justify-content: center;
    text-align: center;
}

/* Header connected pill. */
.cir-nav-connected {
    border-color: rgba(74, 222, 128, 0.60) !important;
    background:
        radial-gradient(circle at 15% 50%, rgba(74, 222, 128, 0.24), transparent 28%),
        linear-gradient(135deg, rgba(22, 101, 52, 0.34), rgba(8, 18, 34, 0.72)) !important;
    color: #f1fff5 !important;
}

.cir-nav-connected::before {
    content: "";
    display: inline-block;
    width: 0.58em;
    height: 0.58em;
    margin-right: 0.55em;
    border-radius: 999px;
    background: #6ee787;
    box-shadow: 0 0 12px rgba(74, 222, 128, 0.55);
    vertical-align: 0.02em;
}

/* Page-load stability.
   Prevents first-paint transitions and small layout shifts during full page navigation. */
html.cir-page-booting *,
html.cir-page-booting *::before,
html.cir-page-booting *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

/* Keep header stable across auth state and page changes. */
.site-header,
.public-header,
.header,
.navbar {
    min-height: 74px;
}

/* Keep right header actions from resizing when auth state changes. */
a[data-cir-auth-cta],
.cir-nav-connect,
.cir-nav-connected {
    min-width: 132px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Keep hero auth action width stable. */
.hero-actions a[href^="/auth/wargaming/login"],
.hero-actions a[href^="/auth/wargaming/logout"],
.cir-auth-login-action,
.cir-auth-logout-action {
    min-width: 190px !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Stabilize hero cards during image loading. */
.page-hero,
.hero,
.hero-compact {
    min-height: 300px;
}

.page-hero-panel {
    min-height: 178px;
}

/* Auth CTA no-blink rendering.
   Both labels are present in HTML; CSS chooses the visible one before paint. */
.cir-auth-header-cta {
    min-width: 132px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.cir-auth-header-cta .cir-auth-label {
    display: none;
}

/* Default: disconnected label. */
.cir-auth-header-cta .cir-auth-label-disconnected {
    display: inline;
}

/* Cached/confirmed connected state: show connected label immediately. */
html.cir-auth-known-connected .cir-auth-header-cta .cir-auth-label-connected,
html.cir-auth-connected .cir-auth-header-cta .cir-auth-label-connected {
    display: inline;
}

html.cir-auth-known-connected .cir-auth-header-cta .cir-auth-label-disconnected,
html.cir-auth-connected .cir-auth-header-cta .cir-auth-label-disconnected {
    display: none;
}

/* Cached/confirmed disconnected state. */
html.cir-auth-known-disconnected .cir-auth-header-cta .cir-auth-label-connected,
html.cir-auth-disconnected .cir-auth-header-cta .cir-auth-label-connected {
    display: none;
}

html.cir-auth-known-disconnected .cir-auth-header-cta .cir-auth-label-disconnected,
html.cir-auth-disconnected .cir-auth-header-cta .cir-auth-label-disconnected {
    display: inline;
}

/* No fade on this CTA; prevents visible blink during page navigation. */
.cir-auth-header-cta,
.cir-auth-header-cta * {
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease !important;
}

/* Absolute final override: auth CTA must not blink on page navigation. */
a[data-cir-auth-cta],
a[data-cir-auth-cta] *,
.cir-auth-header-cta,
.cir-auth-header-cta * {
    animation: none !important;
    transition: none !important;
}

a[data-cir-auth-cta],
html.cir-auth-pending a[data-cir-auth-cta],
html.cir-auth-ready a[data-cir-auth-cta],
html.cir-auth-known-connected a[data-cir-auth-cta],
html.cir-auth-connected a[data-cir-auth-cta],
html.cir-auth-known-disconnected a[data-cir-auth-cta],
html.cir-auth-disconnected a[data-cir-auth-cta] {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Connected/disconnected label selection. */
.cir-auth-header-cta .cir-auth-label {
    display: none !important;
}

.cir-auth-header-cta .cir-auth-label-disconnected {
    display: inline !important;
}

html.cir-auth-known-connected .cir-auth-header-cta .cir-auth-label-connected,
html.cir-auth-connected .cir-auth-header-cta .cir-auth-label-connected {
    display: inline !important;
}

html.cir-auth-known-connected .cir-auth-header-cta .cir-auth-label-disconnected,
html.cir-auth-connected .cir-auth-header-cta .cir-auth-label-disconnected {
    display: none !important;
}

/* Profile page */
.page-hero-profile {
    --page-hero-image: url("/static/public/assets/images/pages/connect.png");
}

.page-hero-profile .hero-content {
    max-width: 720px;
}

/* ===== Profile page ===== */

.page-hero-profile {
    --page-hero-image: url("/static/public/assets/images/pages/connect.png");
}

.profile-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 420px);
    gap: 24px;
    align-items: center;
}

.profile-hero-side {
    display: grid;
    gap: 16px;
}

.profile-mini-panel {
    padding: 18px 22px;
    min-height: 0;
}

.profile-mini-panel h3 {
    margin: 0 0 10px;
    font-size: 1.05rem;
}

.profile-mini-panel p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.92;
}

.profile-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 1100px) {
    .profile-hero-grid {
        grid-template-columns: 1fr;
    }

    .profile-hero-side {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 780px) {
    .profile-hero-side,
    .profile-preview-grid {
        grid-template-columns: 1fr;
    }
}

/* Profile hero: account and mod cards side by side on desktop. */
@media (min-width: 1101px) {
    .profile-hero-grid {
        grid-template-columns: minmax(360px, 0.85fr) minmax(620px, 1.15fr);
        gap: 32px;
    }

    .profile-hero-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .profile-mini-panel {
        height: 100%;
        padding: 18px 20px;
    }

    .profile-mini-panel h3 {
        font-size: 1rem;
    }

    .profile-mini-panel p {
        font-size: 0.9rem;
        line-height: 1.55;
    }
}

/* Profile account actions */
.profile-action-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

.profile-session-panel,
.profile-danger-panel {
    min-height: 230px;
}

.profile-delete-form {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.profile-delete-form label {
    color: rgba(215, 228, 247, 0.82);
    font-weight: 800;
    font-size: 0.86rem;
}

.profile-delete-form input {
    width: 100%;
    border: 1px solid rgba(110, 135, 170, 0.35);
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(4, 12, 24, 0.72);
    color: #f4f8ff;
    outline: none;
}

.profile-delete-form input:focus {
    border-color: rgba(245, 190, 91, 0.72);
    box-shadow: 0 0 0 3px rgba(245, 190, 91, 0.13);
}

.btn-danger {
    border-color: rgba(248, 113, 113, 0.65) !important;
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.92), rgba(69, 10, 10, 0.86)) !important;
    color: #fff4f4 !important;
}

.btn-danger:hover {
    border-color: rgba(252, 165, 165, 0.95) !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.16);
}

.profile-delete-message {
    min-height: 1.4em;
    margin: 0;
    font-size: 0.92rem;
}

.profile-delete-message.is-error {
    color: #fca5a5;
}

.profile-delete-message.is-ok {
    color: #86efac;
}

@media (max-width: 900px) {
    .profile-action-grid {
        grid-template-columns: 1fr;
    }
}

/* Dynamic profile status */
.profile-login-panel {
    max-width: 860px;
}

.profile-delete-hint {
    margin: -4px 0 0;
    color: rgba(190, 205, 230, 0.78);
    font-size: 0.88rem;
}

#profile-authenticated-panel[hidden],
#profile-login-required[hidden],
#profile-actions-section[hidden] {
    display: none !important;
}

/* Tomato-like profile blocks */
.profile-player-hero h1 {
    margin-bottom: 14px;
}

.profile-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.profile-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid rgba(245, 190, 91, 0.28);
    border-radius: 8px;
    background: rgba(4, 12, 24, 0.62);
    color: #f6d37b;
    font-weight: 900;
    font-size: 0.88rem;
}

.profile-stat-grid,
.profile-resource-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.profile-stat-card,
.profile-resource-card {
    min-height: 112px;
    padding: 18px 20px;
}

.profile-stat-card span,
.profile-resource-card span {
    display: block;
    margin-bottom: 10px;
    color: rgba(190, 205, 230, 0.78);
    font-size: 0.82rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profile-stat-card strong,
.profile-resource-card strong {
    display: block;
    color: #f5f8ff;
    font-size: 1.35rem;
    line-height: 1.15;
}

@media (max-width: 1100px) {
    .profile-stat-grid,
    .profile-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .profile-stat-grid,
    .profile-resource-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Kompakte Profilaktionen im Kopfbereich ---------- */

.profile-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
}

.profile-hero-actions[hidden] {
    display: none;
}

.profile-hero-action {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 1px solid rgba(148, 176, 215, 0.28);
    border-radius: 999px;
    color: var(--cir-text);
    background: rgba(7, 18, 32, 0.76);
    font-size: 0.78rem;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.profile-hero-action:hover {
    border-color: rgba(242, 184, 75, 0.48);
}

.profile-hero-action-danger {
    border-color: rgba(239, 68, 68, 0.42);
    color: #fecaca;
}

.profile-delete-compact {
    max-width: 430px;
}

.profile-delete-compact > summary {
    list-style: none;
}

.profile-delete-compact > summary::-webkit-details-marker {
    display: none;
}

.profile-delete-compact[open] {
    flex-basis: 100%;
}

.profile-delete-popover {
    width: min(430px, 100%);
    margin-top: 10px;
    padding: 14px;
    border: 1px solid rgba(239, 68, 68, 0.34);
    border-radius: 14px;
    background: rgba(7, 17, 30, 0.96);
}

.profile-delete-popover p {
    margin: 0 0 10px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.profile-delete-popover label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.75rem;
    font-weight: 800;
}

.profile-delete-popover input {
    width: 100%;
    min-height: 36px;
    padding: 8px 10px;
}

.profile-delete-submit {
    width: auto;
    min-height: 34px;
    padding: 7px 13px;
    font-size: 0.78rem;
}

@media (max-width: 760px) {
    .profile-hero-actions {
        margin-top: 12px;
    }

    .profile-delete-compact,
    .profile-delete-popover {
        width: 100%;
        max-width: none;
    }
}

.profile-delete-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.profile-delete-cancel {
    min-height: 34px;
    padding: 7px 13px;
    font-size: 0.78rem;
}

.profile-delete-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.profile-delete-cancel {
    min-height: 34px;
    padding: 7px 13px;
    font-size: 0.78rem;
}

/* ---------- Nachvollziehbare Beispielbewertung ---------- */

.rating-example-section {
    display: grid;
    gap: clamp(14px, 1.2vw, 22px);
}

.rating-example-heading {
    margin-bottom: 0;
}

.rating-example-heading p {
    max-width: 780px;
}

.rating-example-layout {
    display: grid;
    grid-template-columns:
        minmax(320px, 0.82fr)
        minmax(0, 1.18fr);
    gap: clamp(14px, 1.2vw, 22px);
}

.rating-example-battle,
.rating-example-explanation,
.rating-example-conclusion {
    padding: clamp(17px, 1.25vw, 24px);
}

.rating-example-title {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.rating-example-title h3 {
    margin: 6px 0 0;
    font-size: clamp(1.12rem, 1.15vw, 1.45rem);
}

.rating-example-result {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rating-example-defeat {
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, 0.36);
    background: rgba(127, 29, 29, 0.24);
}

.rating-example-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.rating-example-stat-grid > div {
    min-height: 70px;
    padding: 11px 12px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 13px;
    background: rgba(3, 10, 22, 0.36);
}

.rating-example-stat-grid span {
    display: block;
    margin-bottom: 6px;
    color: var(--cir-muted);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rating-example-stat-grid strong {
    color: var(--cir-text);
    font-size: 1rem;
}

.rating-example-context {
    margin: 15px 0 0;
    line-height: 1.48;
}

.rating-example-explanation {
    display: grid;
    gap: 9px;
}

.rating-example-reason {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 11px 12px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 13px;
    background: rgba(3, 10, 22, 0.31);
}

.rating-example-pillar {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #f2b84b;
    background: rgba(242, 184, 75, 0.11);
    border: 1px solid rgba(242, 184, 75, 0.22);
    font-size: 0.78rem;
    font-weight: 950;
}

.rating-example-reason strong {
    display: block;
    margin-bottom: 4px;
    color: var(--cir-text);
}

.rating-example-reason p {
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.42;
}

.rating-example-conclusion {
    border-color: rgba(242, 184, 75, 0.24);
    background:
        radial-gradient(
            circle at 92% 18%,
            rgba(242, 184, 75, 0.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(19, 35, 55, 0.89),
            rgba(5, 12, 22, 0.95)
        );
}

.rating-example-conclusion h3 {
    margin: 8px 0 7px;
}

.rating-example-conclusion p {
    max-width: 1050px;
    margin-bottom: 0;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .rating-example-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .rating-example-title {
        display: grid;
    }

    .rating-example-result {
        justify-self: start;
    }

    .rating-example-stat-grid {
        grid-template-columns: 1fr;
    }

    .rating-example-reason {
        grid-template-columns: 36px minmax(0, 1fr);
    }
}

/* CIR_RATING_CASE_STUDY_START */

.rating-case-study-section {
    display: grid;
    gap: clamp(16px, 1.35vw, 25px);
}

.rating-case-study-heading {
    margin-bottom: 0;
}

.rating-case-study-heading p,
.rating-case-section-heading p {
    max-width: 920px;
}

.rating-case-hero,
.rating-case-process,
.rating-case-pillar,
.rating-case-team-context,
.rating-case-questions,
.rating-case-conclusion {
    padding: clamp(18px, 1.45vw, 29px);
}

.rating-case-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(360px, 0.62fr);
    gap: clamp(20px, 2vw, 38px);
    align-items: start;
    border-color: rgba(242, 184, 75, 0.26);
    background:
        radial-gradient(
            circle at 95% 8%,
            rgba(242, 184, 75, 0.15),
            transparent 29%
        ),
        linear-gradient(
            180deg,
            rgba(20, 38, 59, 0.95),
            rgba(5, 13, 24, 0.98)
        );
}

.rating-case-hero-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
}

.rating-case-hero-heading h3 {
    margin: 7px 0 0;
    font-size: clamp(1.45rem, 1.7vw, 2.2rem);
}

.rating-case-score {
    min-width: 135px;
    padding: 13px 16px;
    border: 1px solid rgba(242, 184, 75, 0.28);
    border-radius: 17px;
    text-align: center;
    background: rgba(2, 8, 18, 0.68);
}

.rating-case-score strong {
    display: block;
    margin-top: 9px;
    color: var(--cir-text);
    font-size: clamp(2rem, 2.35vw, 2.9rem);
    line-height: 0.95;
}

.rating-case-score small {
    display: block;
    margin-top: 5px;
    color: #f2b84b;
    font-weight: 900;
    letter-spacing: 0.11em;
}

.rating-case-defeat {
    display: inline-flex;
    padding: 5px 9px;
    border: 1px solid rgba(239, 68, 68, 0.36);
    border-radius: 999px;
    color: #fecaca;
    background: rgba(127, 29, 29, 0.25);
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.rating-case-hero-intro {
    max-width: 900px;
    margin: 16px 0 0;
    line-height: 1.55;
}

.rating-case-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 19px;
}

.rating-case-stat-grid > div {
    min-height: 86px;
    padding: 11px 12px;
    border: 1px solid rgba(148, 163, 184, 0.13);
    border-radius: 12px;
    background: rgba(3, 10, 22, 0.38);
}

.rating-case-stat-grid span,
.rating-case-stat-grid small {
    display: block;
}

.rating-case-stat-grid span {
    color: var(--cir-muted);
    font-size: 0.66rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rating-case-stat-grid strong {
    display: block;
    margin: 7px 0 4px;
    color: var(--cir-text);
    font-size: 1rem;
}

.rating-case-stat-grid small {
    color: rgba(203, 213, 225, 0.70);
    font-size: 0.69rem;
    line-height: 1.3;
}

.rating-case-inline-image {
    min-width: 0;
    margin: 0;
}

.rating-case-inline-image a {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: rgba(1, 6, 14, 0.92);
}

.rating-case-inline-image img {
    width: 100%;
    height: 100%;
    max-height: 330px;
    display: block;
    object-fit: contain;
    transition:
        transform 170ms ease,
        filter 170ms ease;
}

.rating-case-inline-image a:hover img,
.rating-case-inline-image a:focus-visible img {
    transform: scale(1.018);
    filter: brightness(1.07);
}

.rating-case-inline-image a:focus-visible {
    outline: 2px solid rgba(242, 184, 75, 0.88);
    outline-offset: 3px;
}

.rating-case-inline-image a > span {
    position: absolute;
    right: 9px;
    bottom: 9px;
    padding: 5px 8px;
    border: 1px solid rgba(242, 184, 75, 0.34);
    border-radius: 999px;
    color: #f8fafc;
    background: rgba(2, 8, 18, 0.88);
    font-size: 0.67rem;
    font-weight: 850;
    opacity: 0;
    transform: translateY(3px);
    transition:
        opacity 150ms ease,
        transform 150ms ease;
}

.rating-case-inline-image a:hover > span,
.rating-case-inline-image a:focus-visible > span {
    opacity: 1;
    transform: none;
}

.rating-case-inline-image figcaption {
    padding: 10px 4px 0;
    color: var(--cir-muted);
    font-size: 0.78rem;
    line-height: 1.42;
}

.rating-case-main-image a {
    min-height: 285px;
}

.rating-case-section-heading {
    margin-bottom: 17px;
}

.rating-case-section-heading h3 {
    margin: 6px 0 7px;
    font-size: clamp(1.25rem, 1.45vw, 1.8rem);
}

.rating-case-process-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.rating-case-process-step {
    position: relative;
    min-height: 100%;
    padding: 15px 13px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 13px;
    background: rgba(3, 10, 22, 0.33);
}

.rating-case-process-step > span {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 11px;
    border: 1px solid rgba(242, 184, 75, 0.27);
    border-radius: 10px;
    color: #f2b84b;
    background: rgba(242, 184, 75, 0.09);
    font-size: 0.76rem;
    font-weight: 950;
}

.rating-case-process-step strong {
    display: block;
    margin-bottom: 7px;
    color: var(--cir-text);
    font-size: 0.87rem;
}

.rating-case-process-step p {
    margin: 0;
    font-size: 0.79rem;
    line-height: 1.44;
}

.rating-case-pillar-stack {
    display: grid;
    gap: 15px;
}

.rating-case-pillar {
    overflow: hidden;
}

.rating-case-pillar-header {
    display: grid;
    grid-template-columns: 49px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    margin-bottom: 16px;
}

.rating-case-pillar-number {
    min-height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(242, 184, 75, 0.27);
    border-radius: 13px;
    color: #f2b84b;
    background: rgba(242, 184, 75, 0.09);
    font-size: 0.8rem;
    font-weight: 950;
}

.rating-case-pillar-header h3 {
    margin: 4px 0 0;
    font-size: clamp(1.25rem, 1.35vw, 1.7rem);
}

.rating-case-strength {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rating-case-strength-very-high {
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, 0.30);
    background: rgba(127, 29, 29, 0.20);
}

.rating-case-strength-high {
    color: #ddd6fe;
    border: 1px solid rgba(168, 85, 247, 0.30);
    background: rgba(88, 28, 135, 0.20);
}

.rating-case-strength-medium {
    color: #bfdbfe;
    border: 1px solid rgba(59, 130, 246, 0.28);
    background: rgba(30, 64, 175, 0.17);
}

.rating-case-strength-low {
    color: #bbf7d0;
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: rgba(20, 83, 45, 0.18);
}

.rating-case-pillar-lead {
    max-width: 1150px;
    margin: 0 0 15px;
    line-height: 1.53;
}

.rating-case-pillar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(340px, 0.6fr);
    gap: 20px;
    align-items: start;
}

.rating-case-factor-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.rating-case-factor-list-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.rating-case-factor-list section {
    min-height: 100%;
    padding: 13px 14px;
    border: 1px solid rgba(148, 163, 184, 0.11);
    border-radius: 12px;
    background: rgba(3, 10, 22, 0.30);
}

.rating-case-factor-list h4 {
    margin: 0 0 7px;
    color: var(--cir-text);
    font-size: 0.91rem;
}

.rating-case-factor-list p {
    margin: 0;
    font-size: 0.80rem;
    line-height: 1.46;
}

.rating-case-factor-list small {
    display: block;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.10);
    color: #f2b84b;
    font-size: 0.68rem;
    font-weight: 800;
}

.rating-case-boundary {
    margin-top: 12px;
    padding: 12px 14px;
    border-left: 3px solid rgba(242, 184, 75, 0.72);
    border-radius: 0 11px 11px 0;
    background: rgba(242, 184, 75, 0.06);
}

.rating-case-boundary strong {
    display: block;
    margin-bottom: 4px;
    color: var(--cir-text);
    font-size: 0.82rem;
}

.rating-case-boundary p {
    margin: 0;
    font-size: 0.79rem;
    line-height: 1.43;
}

.rating-case-pillar-result {
    margin-top: 15px;
    padding: 11px 13px;
    border: 1px solid rgba(148, 163, 184, 0.10);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.81rem;
}

.rating-case-pillar-result strong {
    color: var(--cir-text);
}

.rating-case-pillar-result span {
    color: var(--cir-muted);
}

.rating-case-s1 {
    border-color: rgba(239, 68, 68, 0.20);
}

.rating-case-s2 {
    border-color: rgba(59, 130, 246, 0.20);
}

.rating-case-s3 {
    border-color: rgba(34, 197, 94, 0.20);
}

.rating-case-s4 {
    border-color: rgba(168, 85, 247, 0.20);
}

.rating-case-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.rating-case-team-grid .rating-case-inline-image {
    padding: 9px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    background: rgba(3, 10, 22, 0.28);
}

.rating-case-team-grid .rating-case-inline-image a {
    min-height: 225px;
}

.rating-case-question-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.rating-case-question {
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    background: rgba(3, 10, 22, 0.31);
}

.rating-case-question summary {
    position: relative;
    padding: 13px 40px 13px 14px;
    color: var(--cir-text);
    font-size: 0.83rem;
    font-weight: 850;
    cursor: pointer;
    list-style: none;
}

.rating-case-question summary::-webkit-details-marker {
    display: none;
}

.rating-case-question summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #f2b84b;
    font-size: 1.1rem;
    font-weight: 900;
}

.rating-case-question[open] summary::after {
    content: "−";
}

.rating-case-question p {
    margin: 0;
    padding: 0 14px 14px;
    border-top: 1px solid rgba(148, 163, 184, 0.09);
    padding-top: 12px;
    font-size: 0.80rem;
    line-height: 1.48;
}

.rating-case-conclusion {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 17px;
    border-color: rgba(242, 184, 75, 0.27);
    background:
        radial-gradient(
            circle at 92% 15%,
            rgba(242, 184, 75, 0.13),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            rgba(18, 35, 55, 0.93),
            rgba(5, 12, 22, 0.97)
        );
}

.rating-case-conclusion-symbol {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(242, 184, 75, 0.28);
    border-radius: 15px;
    color: #f2b84b;
    background: rgba(242, 184, 75, 0.10);
    font-size: 1.55rem;
    font-weight: 950;
}

.rating-case-conclusion h3 {
    margin: 7px 0 9px;
    font-size: clamp(1.25rem, 1.45vw, 1.8rem);
}

.rating-case-conclusion p {
    max-width: 1150px;
    margin: 0 0 10px;
    line-height: 1.52;
}

.rating-case-neutral-note {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid rgba(148, 163, 184, 0.13);
    color: var(--cir-muted);
    font-size: 0.80rem;
    line-height: 1.45;
}

@media (max-width: 1200px) {
    .rating-case-hero {
        grid-template-columns: 1fr;
    }

    .rating-case-main-image a {
        min-height: 240px;
    }

    .rating-case-process-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .rating-case-pillar-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .rating-case-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rating-case-process-grid,
    .rating-case-factor-list-three {
        grid-template-columns: 1fr;
    }

    .rating-case-team-grid,
    .rating-case-question-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .rating-case-hero-heading,
    .rating-case-pillar-header {
        grid-template-columns: 1fr;
    }

    .rating-case-score {
        width: 100%;
        min-width: 0;
    }

    .rating-case-pillar-number {
        width: 46px;
    }

    .rating-case-strength {
        justify-self: start;
    }

    .rating-case-stat-grid,
    .rating-case-process-grid,
    .rating-case-factor-list {
        grid-template-columns: 1fr;
    }

    .rating-case-inline-image a,
    .rating-case-team-grid .rating-case-inline-image a {
        min-height: 180px;
    }

    .rating-case-grid,
    .rating-case-factor-list {
        grid-template-columns: 1-inline-image a > span {
        opacity: 1;
        transform: none;
    }

    .rating-case-conclusion {
        grid-template-columns: 1fr;
    }

    .rating-case-conclusion-symbol {
        width: 52px;
    }
}

.rating-case-presence-definition {
    grid-column: 1 / -1;
    padding: 14px 15px;
    border: 1px solid rgba(242, 184, 75, 0.19);
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            rgba(242, 184, 75, 0.075),
            rgba(3, 10, 22, 0.34)
        );
}

.rating-case-presence-definition > strong {
    display: block;
    margin-bottom: 8px;
    color: var(--cir-text);
    font-size: 0.88rem;
}

.rating-case-presence-definition p {
    margin: 0;
    font-size: 0.80rem;
    line-height: 1.48;
}

.rating-case-presence-definition ul {
    display: grid;
    gap: 6px;
    margin: 11px 0;
    padding: 0;
    list-style: none;
}

.rating-case-presence-definition li {
    position: relative;
    padding-left: 20px;
    color: var(--cir-muted);
    font-size: 0.79rem;
    line-height: 1.43;
}

.rating-case-presence-definition li::before {
    content: "•";
    position: absolute;
    left: 4px;
    color: #f2b84b;
    font-weight: 900;
}

/* CIR_RATING_CASE_STUDY_END */



/* Detaillierter Gefechtsbericht in der Beispielbewertung */

.rating-case-result-image a {
    min-height: 320px;
}

.rating-case-result-image img {
    max-height: 430px;
}

@media (max-width: 900px) {
    .rating-case-result-image a {
        min-height: 240px;
    }
}

@media (max-width: 650px) {
    .rating-case-result-image a {
        min-height: 190px;
    }
}

/* CIR_RATING_IMAGE_BACKDROP_START */

/*
 * Bilder ohne künstlichen Rahmen, schwarze Seitenflächen
 * oder weichgezeichneten Hintergrund darstellen.
 */

.rating-case-inline-image,
.rating-case-team-grid .rating-case-inline-image {
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    overflow: visible;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.rating-case-inline-image a,
.rating-case-main-image a,
.rating-case-result-image a,
.rating-case-team-grid .rating-case-inline-image a {
    position: relative;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    display: block;
    overflow: hidden;
    isolation: auto;
    border: 0 !important;
    border-radius: 12px;
    background: transparent !important;
    box-shadow: none !important;
}

/* Alte Hintergrundkopien vollständig deaktivieren. */
.rating-case-inline-image a::before,
.rating-case-inline-image a::after {
    display: none !important;
    content: none !important;
}

.rating-case-inline-image img,
.rating-case-main-image img,
.rating-case-result-image img,
.rating-case-team-grid .rating-case-inline-image img {
    position: static;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    display: block;
    object-fit: initial !important;
    border-radius: 12px;
    filter: none;
    transform: none;
    transition:
        filter 170ms ease,
        transform 170ms ease;
}

.rating-case-inline-image a:hover img,
.rating-case-inline-image a:focus-visible img {
    transform: scale(1.006);
    filter: brightness(1.04);
}

.rating-case-inline-image a:focus-visible {
    outline: 2px solid rgba(242, 184, 75, 0.88);
    outline-offset: 3px;
}

/* Button bleibt direkt auf dem Bild. */
.rating-case-inline-image a > span {
    z-index: 2;
    right: 9px;
    bottom: 9px;
}

/* Beschreibung ohne zusätzlichen Kasten. */
.rating-case-inline-image figcaption {
    margin: 0;
    padding: 10px 3px 0;
    border: 0 !important;
    color: var(--cir-muted);
    background: transparent !important;
    font-size: 0.79rem;
    line-height: 1.48;
}

/* CIR_RATING_IMAGE_BACKDROP_END */

/* ==========================================================
   Finale Bilddarstellung der Rating-Fallstudie
   Keine schwarzen Vorschauflächen oder künstlichen Rahmen
   ========================================================== */

figure.rating-case-inline-image,
.rating-case-team-grid figure.rating-case-inline-image {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Alle festen Vorschaurahmen und Seitenverhältnisse aufheben. */
figure.rating-case-inline-image > a,
figure.rating-case-main-image > a,
figure.rating-case-result-image > a,
.rating-case-team-grid figure.rating-case-inline-image > a {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Alte Hintergrundkopien und Abdunklungen sicher deaktivieren. */
figure.rating-case-inline-image > a::before,
figure.rating-case-inline-image > a::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Breite Gefechtsbilder vollständig in natürlichem Verhältnis anzeigen. */
figure.rating-case-main-image > a > img,
figure.rating-case-result-image > a > img {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    margin: 0 !important;
    object-fit: unset !important;
    object-position: initial !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

/*
 * Die Teamlisten sind sehr hoch und schmal.
 * Sie werden in natürlicher Form zentriert, ohne schwarzen Kasten.
 */
.rating-case-team-grid figure.rating-case-inline-image > a {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.rating-case-team-grid figure.rating-case-inline-image > a > img {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 520px !important;
    display: block !important;
    margin: 0 auto !important;
    object-fit: unset !important;
    object-position: initial !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
}

/* Dezenter Hover ohne Vergrößerung des Rahmens. */
figure.rating-case-inline-image > a:hover > img,
figure.rating-case-inline-image > a:focus-visible > img {
    transform: none !important;
    filter: brightness(1.04) !important;
}

/* Der Beschreibungstext steht direkt unter dem Bild. */
figure.rating-case-inline-image > figcaption,
.rating-case-team-grid figure.rating-case-inline-image > figcaption {
    margin: 0 !important;
    padding: 10px 3px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--cir-muted) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.79rem !important;
    line-height: 1.48 !important;
}

@media (max-width: 700px) {
    .rating-case-team-grid figure.rating-case-inline-image > a > img {
        width: 100% !important;
        max-height: none !important;
    }
}

/* CIR_PUBLIC_STATISTICS_START */

.statistics-page {
    --statistics-border: rgba(148, 163, 184, 0.15);
    --statistics-panel: rgba(11, 24, 40, 0.88);
    --statistics-panel-soft: rgba(18, 34, 53, 0.74);
    --statistics-muted: #9caec0;
    --statistics-accent: #efb957;
    --statistics-cyan: #63c4df;
    --statistics-green: #5cc696;
}

.statistics-page .statistics-section {
    padding-top: clamp(28px, 4vw, 52px);
}

.statistics-page .statistics-hero-status {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    justify-content: center;
}

.statistics-page .statistics-hero-status > strong {
    display: block;
    margin: 10px 0 0;
    color: var(--statistics-accent);
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.06em;
}

.statistics-page .statistics-hero-status h2 {
    margin: 8px 0 12px;
}

.statistics-page .statistics-hero-status small {
    margin-top: 10px;
    color: var(--statistics-muted);
}

.statistics-page .statistics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.statistics-page .statistics-kpi-card {
    position: relative;
    min-width: 0;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--statistics-border);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(24, 43, 64, 0.9),
            rgba(9, 20, 34, 0.94)
        );
}

.statistics-page .statistics-kpi-card::after {
    content: "";
    position: absolute;
    right: -32px;
    bottom: -52px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(239, 185, 87, 0.055);
}

.statistics-page .statistics-kpi-card > span {
    display: block;
    color: var(--statistics-muted);
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.statistics-page .statistics-kpi-card > strong {
    position: relative;
    z-index: 1;
    display: block;
    margin: 12px 0 8px;
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    line-height: 1;
    letter-spacing: -0.045em;
}

.statistics-page .statistics-kpi-card > small {
    position: relative;
    z-index: 1;
    color: var(--statistics-muted);
    line-height: 1.4;
}

.statistics-page .statistics-chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 16px;
}

.statistics-page .statistics-chart-panel {
    min-width: 0;
    padding: clamp(18px, 2.4vw, 26px);
}

.statistics-page .statistics-panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 24px;
}

.statistics-page .statistics-panel-header h2 {
    margin: 4px 0 0;
}

.statistics-page .statistics-panel-header p {
    max-width: 68ch;
    margin: 0;
    color: var(--statistics-muted);
}

.statistics-page .statistics-distribution-chart {
    display: grid;
    gap: 15px;
}

.statistics-page .statistics-distribution-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 7px;
}

.statistics-page .statistics-distribution-label strong {
    font-size: 0.86rem;
}

.statistics-page .statistics-distribution-label span {
    color: var(--statistics-muted);
    font-size: 0.78rem;
}

.statistics-page .statistics-distribution-track,
.statistics-page .statistics-pillar-track {
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
}

.statistics-page .statistics-distribution-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            #bd7637,
            var(--statistics-accent)
        );
    box-shadow: 0 0 18px rgba(239, 185, 87, 0.2);
}

.statistics-page .statistics-chart-legend {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    color: var(--statistics-muted);
    font-size: 0.76rem;
}

.statistics-page .statistics-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.statistics-page .statistics-chart-legend span::before {
    content: "";
    width: 11px;
    height: 11px;
    border-radius: 3px;
}

.statistics-page .statistics-legend-battles::before {
    background: rgba(99, 196, 223, 0.65);
}

.statistics-page .statistics-legend-cir::before {
    border-radius: 50% !important;
    background: var(--statistics-accent);
}

.statistics-page .statistics-trend-chart {
    min-height: 280px;
}

.statistics-page .statistics-trend-chart svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

.statistics-page .statistics-chart-grid-line {
    stroke: rgba(148, 163, 184, 0.12);
    stroke-width: 1;
}

.statistics-page .statistics-chart-bar {
    fill: rgba(99, 196, 223, 0.42);
    stroke: rgba(99, 196, 223, 0.68);
    stroke-width: 1;
}

.statistics-page .statistics-chart-line {
    fill: none;
    stroke: var(--statistics-accent);
    stroke-width: 3;
    stroke-linejoin: round;
    stroke-linecap: round;
    filter: drop-shadow(0 0 7px rgba(239, 185, 87, 0.24));
}

.statistics-page .statistics-chart-point {
    fill: #f6d28f;
    stroke: #5c3913;
    stroke-width: 2;
}

.statistics-page .statistics-chart-label {
    fill: var(--statistics-muted);
    font-size: 11px;
}

.statistics-page .statistics-pillar-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.statistics-page .statistics-pillar-card {
    min-width: 0;
    padding: 19px;
    border: 1px solid var(--statistics-border);
    border-radius: 16px;
    background:
        linear-gradient(
            155deg,
            rgba(22, 40, 61, 0.9),
            rgba(8, 18, 31, 0.95)
        );
}

.statistics-page .statistics-pillar-card header {
    display: flex;
    align-items: center;
    gap: 11px;
}

.statistics-page .statistics-pillar-card header > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 11px;
    color: var(--statistics-accent);
    background: rgba(239, 185, 87, 0.1);
    font-size: 0.79rem;
    font-weight: 800;
}

.statistics-page .statistics-pillar-card h3 {
    margin: 0;
    font-size: 0.94rem;
}

.statistics-page .statistics-pillar-card header small {
    color: var(--statistics-muted);
}

.statistics-page .statistics-pillar-card > strong {
    display: block;
    margin-top: 24px;
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1;
    letter-spacing: -0.04em;
}

.statistics-page .statistics-pillar-unit {
    display: block;
    margin: 5px 0 15px;
    color: var(--statistics-muted);
    font-size: 0.75rem;
}

.statistics-page .statistics-pillar-track {
    height: 9px;
}

.statistics-page .statistics-pillar-track > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            var(--statistics-cyan),
            var(--statistics-accent)
        );
}

.statistics-page .statistics-pillar-coverage {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    color: var(--statistics-muted);
    font-size: 0.72rem;
}

.statistics-page .statistics-explorer-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.6fr);
    align-items: end;
    gap: 28px;
}

.statistics-page .statistics-explorer-heading p {
    margin: 0;
    color: var(--statistics-muted);
}

.statistics-page .statistics-explorer {
    padding: 0;
    overflow: hidden;
}

.statistics-page .statistics-tabs {
    display: flex;
    gap: 5px;
    padding: 10px;
    border-bottom: 1px solid var(--statistics-border);
    background: rgba(6, 15, 27, 0.72);
}

.statistics-page .statistics-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--statistics-muted);
    background: transparent;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.statistics-page .statistics-tab span {
    display: inline-grid;
    min-width: 25px;
    height: 22px;
    padding: 0 6px;
    place-items: center;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.1);
    font-size: 0.7rem;
}

.statistics-page .statistics-tab.is-active {
    border-color: rgba(239, 185, 87, 0.26);
    color: #f7d89a;
    background: rgba(239, 185, 87, 0.09);
}

.statistics-page .statistics-filter-bar {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.6fr)
        repeat(4, minmax(125px, 0.7fr))
        auto;
    align-items: end;
    gap: 11px;
    padding: 16px;
    border-bottom: 1px solid var(--statistics-border);
}

.statistics-page .statistics-filter {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.statistics-page .statistics-filter > span {
    color: var(--statistics-muted);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.statistics-page .statistics-filter input,
.statistics-page .statistics-filter select {
    width: 100%;
    height: 42px;
    padding: 0 11px;
    border: 1px solid rgba(148, 163, 184, 0.19);
    border-radius: 9px;
    color: var(--cir-text, #edf4fb);
    background: rgba(4, 13, 24, 0.82);
    font: inherit;
    font-size: 0.82rem;
}

.statistics-page .statistics-filter input:focus,
.statistics-page .statistics-filter select:focus {
    border-color: rgba(239, 185, 87, 0.65);
    outline: none;
    box-shadow: 0 0 0 3px rgba(239, 185, 87, 0.09);
}

.statistics-page .statistics-reset-button {
    height: 42px;
    padding: 0 14px;
    border: 1px solid rgba(148, 163, 184, 0.19);
    border-radius: 9px;
    color: var(--statistics-muted);
    background: rgba(148, 163, 184, 0.05);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.statistics-page .statistics-reset-button:hover {
    color: #f4f7fa;
    background: rgba(148, 163, 184, 0.1);
}

.statistics-page .statistics-table-summary {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 11px 16px;
    color: var(--statistics-muted);
    font-size: 0.74rem;
}

.statistics-page .statistics-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border-top: 1px solid rgba(148, 163, 184, 0.08);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.statistics-page .statistics-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

.statistics-page .statistics-table[hidden] {
    display: none;
}

.statistics-page .statistics-table th,
.statistics-page .statistics-table td {
    padding: 13px 15px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.09);
    text-align: right;
    white-space: nowrap;
}

.statistics-page .statistics-table th:first-child,
.statistics-page .statistics-table td:first-child {
    text-align: left;
}

.statistics-page .statistics-table thead {
    position: sticky;
    z-index: 2;
    top: 0;
}

.statistics-page .statistics-table th {
    background: #101f31;
}

.statistics-page .statistics-table tbody tr:hover {
    background: rgba(148, 163, 184, 0.045);
}

.statistics-page .statistics-sort-button {
    position: relative;
    padding: 0 16px 0 0;
    border: 0;
    color: var(--statistics-muted);
    background: transparent;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    cursor: pointer;
}

.statistics-page .statistics-sort-button::after {
    content: "↕";
    position: absolute;
    right: 0;
    opacity: 0.45;
}

.statistics-page .statistics-sort-button.is-ascending::after {
    content: "↑";
    color: var(--statistics-accent);
    opacity: 1;
}

.statistics-page .statistics-sort-button.is-descending::after {
    content: "↓";
    color: var(--statistics-accent);
    opacity: 1;
}

.statistics-page .statistics-sort-button.is-sorted {
    color: #f5d18b;
}

.statistics-page .statistics-name-cell {
    display: grid;
    grid-template-columns: minmax(0, max-content) max-content;
    align-items: center;
    justify-content: start;
    gap: 3px 8px;
}

.statistics-page .statistics-name-cell > small {
    grid-column: 1;
    color: var(--statistics-muted);
}

.statistics-page .statistics-sample-badge {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 0.61rem;
    font-weight: 800;
    text-transform: uppercase;
}

.statistics-page .statistics-sample-badge.is-small {
    border: 1px solid rgba(248, 160, 91, 0.25);
    color: #f0ae72;
    background: rgba(248, 160, 91, 0.08);
}

.statistics-page .statistics-sample-badge.is-medium {
    border: 1px solid rgba(239, 185, 87, 0.22);
    color: #e5bd73;
    background: rgba(239, 185, 87, 0.07);
}

.statistics-page .statistics-empty-row {
    height: 110px;
    color: var(--statistics-muted);
    text-align: center !important;
}

.statistics-page .statistics-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 14px 16px;
}

.statistics-page .statistics-pagination button {
    min-width: 90px;
    height: 38px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 9px;
    color: #dce8f3;
    background: rgba(148, 163, 184, 0.07);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
}

.statistics-page .statistics-pagination button:disabled {
    cursor: default;
    opacity: 0.35;
}

.statistics-page .statistics-pagination span {
    color: var(--statistics-muted);
    font-size: 0.76rem;
}

.statistics-page .statistics-beta-note {
    border-color: rgba(239, 185, 87, 0.24);
    background:
        linear-gradient(
            135deg,
            rgba(40, 31, 18, 0.25),
            rgba(10, 23, 38, 0.92)
        );
}

.statistics-page .statistics-loading {
    color: var(--statistics-muted);
}

.statistics-page .statistics-error {
    position: fixed;
    z-index: 50;
    right: 20px;
    bottom: 20px;
    max-width: 420px;
    padding: 14px 17px;
    border: 1px solid rgba(248, 113, 113, 0.34);
    border-radius: 11px;
    color: #fecaca;
    background: rgba(61, 13, 13, 0.97);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}

@media (max-width: 1150px) {
    .statistics-page .statistics-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .statistics-page .statistics-filter-search {
        grid-column: span 2;
    }
}

@media (max-width: 980px) {
    .statistics-page .statistics-kpi-grid,
    .statistics-page .statistics-pillar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .statistics-page .statistics-chart-grid {
        grid-template-columns: 1fr;
    }

    .statistics-page .statistics-explorer-heading {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .statistics-page .statistics-kpi-grid,
    .statistics-page .statistics-pillar-grid {
        grid-template-columns: 1fr;
    }

    .statistics-page .statistics-filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .statistics-page .statistics-filter-search {
        grid-column: 1 / -1;
    }

    .statistics-page .statistics-reset-button {
        grid-column: 1 / -1;
    }

    .statistics-page .statistics-table-summary {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .statistics-page .statistics-trend-chart {
        min-height: 210px;
        overflow-x: auto;
    }

    .statistics-page .statistics-trend-chart svg {
        min-width: 650px;
    }
}

@media (max-width: 430px) {
    .statistics-page .statistics-filter-bar {
        grid-template-columns: 1fr;
    }

    .statistics-page .statistics-filter-search,
    .statistics-page .statistics-reset-button {
        grid-column: auto;
    }

    .statistics-page .statistics-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .statistics-page .statistics-tab {
        justify-content: center;
    }
}

/* CIR_PUBLIC_STATISTICS_END */

/* CIR_PLAYER_PORTAL_HEADER_START */

.player-portal-header-button {
    position: relative;
    border-color: rgba(91, 196, 218, 0.46);
    color: #dff8ff;
    background:
        linear-gradient(
            135deg,
            rgba(22, 84, 104, 0.48),
            rgba(9, 35, 49, 0.72)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 8px 22px rgba(21, 122, 151, 0.12);
}

.player-portal-header-button::before {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #65d8ef;
    box-shadow: 0 0 10px rgba(101, 216, 239, 0.76);
}

.player-portal-header-button:hover {
    border-color: rgba(101, 216, 239, 0.72);
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            rgba(29, 111, 137, 0.62),
            rgba(10, 47, 64, 0.82)
        );
}

.player-portal-mobile-button {
    border-color: rgba(91, 196, 218, 0.38);
    color: #dff8ff;
    background: rgba(22, 84, 104, 0.22);
}

/* CIR_PLAYER_PORTAL_HEADER_END */

/* CIR public page corrections 2026-07-18 */

.status-card em {
    max-width: 19rem;
    white-space: normal;
    text-align: right;
    line-height: 1.3;
}

.known-issues-list,
.changelog-list,
.contact-grid {
    display: grid;
    gap: 1rem;
}

.contact-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.contact-card h3 {
    margin-bottom: 0;
}

.contact-card a {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .status-card em {
        max-width: none;
        text-align: left;
    }
}

/* CIR statistics portal integration 2026-07-18 */

/*
 * Die Releaseinformationen erhalten eine feste Beschriftungsspalte.
 * Dadurch umbrechen WoT-Version und Veröffentlichungsdatum nicht mehr
 * in die danebenliegende Wertespalte.
 */
.release-panel .release-list {
    display: grid;
    gap: 0.55rem;
}

.release-panel .release-list > div {
    display: grid;
    grid-template-columns: minmax(8.75rem, max-content) minmax(0, 1fr);
    align-items: start;
    column-gap: 0.9rem;
}

.release-panel .release-list strong {
    white-space: nowrap;
}

.release-panel .release-list span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/*
 * Öffentliche und persönliche Statistiken gehören zu einem gemeinsamen
 * Portal. Der Umschalter wird deshalb auf beiden Seiten identisch gezeigt.
 */
.statistics-portal-switch {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    max-width: 100%;
    margin: 1rem 0 1.25rem;
    padding: 0.3rem;
    border: 1px solid rgba(137, 172, 204, 0.22);
    border-radius: 999px;
    background: rgba(7, 18, 29, 0.72);
    overflow-x: auto;
}

.statistics-portal-switch a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: 0.55rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    color: rgba(232, 239, 246, 0.72);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.statistics-portal-switch a:hover {
    color: #ffffff;
    border-color: rgba(211, 164, 74, 0.35);
}

.statistics-portal-switch a.is-active {
    color: #ffffff;
    border-color: rgba(211, 164, 74, 0.62);
    background: rgba(211, 164, 74, 0.13);
}

.player-portal-header-button.active {
    color: #ffffff;
    border-color: rgba(211, 164, 74, 0.72);
    background: rgba(211, 164, 74, 0.1);
}

@media (max-width: 700px) {
    .release-panel .release-list > div {
        grid-template-columns: 1fr;
        row-gap: 0.15rem;
    }

    .release-panel .release-list strong {
        white-space: normal;
    }

    .statistics-portal-switch {
        width: 100%;
        border-radius: 1rem;
    }

    .statistics-portal-switch a {
        flex: 1 0 auto;
    }
}