/* =========================================================
   PROFILE -- Screen-spezifische Regeln fuer #view-profile.
   Diese Datei ist NOCH NICHT die vollstaendige Migration aller Profile-Regeln aus
   style.css (Identity-Card/Tabs/Stat-Zeile liegen aktuell noch dort, bereits gegen
   die ec-Tokens gestylt) -- das ist ein bewusster Zwischenstand, um das Risiko eines
   fehlerhaften grossen mechanischen Umzugs in einem Rutsch zu vermeiden. Neue/
   geaenderte Profile-Regeln kommen ab jetzt hierher, nicht mehr in style.css.
   ========================================================= */

/* Kategorie-Mastery: binaerer Durchgespielt/Offen-Zustand statt Prozentzahl
   (renderCategoryMastery in app.js, Master Brief Abschnitt 6.3/28). */
.mastery-status {
    font-family: var(--font-head); font-size: var(--text-xs); font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase; color: var(--ec-text-muted);
}
.mastery-status.is-done { color: var(--ec-gold); text-shadow: 0 0 8px rgba(255,215,0,0.35); }

/* =====================================================
   DURCHGEHENDE STAT-LEISTE statt einzeln umrandeter Kacheln.
   Lektion aus dem externen Referenz-Export (2026-09-08): eine gemeinsame Flaeche mit
   duennen Trennlinien zwischen den Zellen liest sich als EIN System, viele einzeln
   umrandete Kacheln mit Luecke dazwischen lesen sich als "viele Boxen nebeneinander".
   Kein !important, keine zusaetzliche Override-Datei -- reine Praezisierung der
   bestehenden .header-stat-tile/.profile-stat-card Komponenten fuer diesen Kontext.
   ===================================================== */
.profile-stat-tiles-row {
    gap: 0; border: 1px solid var(--ec-border-white); border-radius: var(--radius-sm);
    overflow: hidden; background: var(--ec-panel-elevated);
}
.profile-stat-tiles-row .header-stat-tile {
    border: 0; border-right: 1px solid var(--ec-border-white); border-bottom: 1px solid var(--ec-border-white);
    border-radius: 0; background: transparent;
}
.profile-stat-tiles-row .header-stat-tile:last-child { border-right: 0; border-bottom: 0; }

/* .profile-stat-card (STATISTIK-Panel: Bester Score/Perfekte Runden/Gespielt/Winrate):
   gleiches Prinzip, ersetzt die vorherige einzelne Cyan-Linksrand-Karte. */
.profile-stats {
    gap: 0; border: 1px solid var(--ec-border-white); border-radius: var(--radius-sm);
    overflow: hidden; background: var(--ec-panel-elevated);
}
.profile-stat-card {
    border: 0; border-right: 1px solid var(--ec-border-white); padding: var(--space-3) var(--space-4);
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.profile-stat-card:last-child { border-right: 0; }
@media (max-width: 600px) {
    .profile-stat-card:nth-child(2n) { border-right: 0; }
    .profile-stat-card:nth-child(n+3) { border-top: 1px solid var(--ec-border-white); }
}
.profile-stat-card .stat-label {
    font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 1px; text-transform: uppercase;
    color: var(--ec-text-tertiary); order: 2;
}
.profile-stat-card .stat-value {
    font-family: var(--font-head); font-size: var(--text-xl); font-weight: 700; color: var(--ec-text-primary);
    font-variant-numeric: tabular-nums; order: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =====================================================
   Tab-Leiste: eigene umrandete Flaeche statt frei schwebender Reihe -- liest sich
   als physisches HUD-Bauteil, nicht als reiner Text mit Unterstrich. Unterstrich
   bleibt (Master Brief Abschnitt 13/19: keine gefuellten Pill-Buttons), nur die
   Reihe selbst bekommt jetzt Rand+Flaeche wie jede andere Komponente auf der Seite.
   ===================================================== */
.profile-tabs {
    gap: 2px; padding: 0 var(--space-2); margin-bottom: var(--space-5); min-height: 52px; align-items: center;
    border: 1px solid var(--ec-border-white); border-radius: var(--radius-sm); background: var(--ec-panel-elevated);
}
.profile-tab.active::after { bottom: 4px; left: 14px; right: 14px; }

/* =====================================================
   Kategorien-Status: Rechteck-Kacheln statt Sechsecke. Die Hexagon-Form war reine
   Dekoration ohne Bedeutung (Master Brief Abschnitt 2.2) und die einzige Stelle im
   Profil, die aus der sonst durchgehend rechteckigen Bildsprache ausschert.
   ===================================================== */
.mastery-hex-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3);
    overflow: visible; padding: 0;
}
.mastery-hex-grid .badge {
    width: auto; aspect-ratio: auto; clip-path: none; flex-direction: column; gap: var(--space-2);
    padding: var(--space-4) var(--space-3); border: 1px solid var(--ec-border-white); background: var(--ec-panel-elevated);
}
.mastery-hex-grid .badge.tier-gold { border-color: rgba(255,215,0,0.35); }
.mastery-hex-grid .badge-icon-img { width: 32px; height: 32px; border-radius: 50%; background: rgba(0,240,255,0.1); padding: 7px; box-sizing: border-box; }
.mastery-hex-grid .badge-title { font-size: var(--text-xs); padding: 0; text-transform: uppercase; letter-spacing: 0.5px; color: var(--ec-text-secondary); }

/* =====================================================
   Hero: Avatar mit Tiefe statt Flat-Fill, XP-Balken auf sinnvolle Breite gedeckelt
   statt volle Kartenbreite (bei breiten Screens wirkte er sonst unnoetig lang-
   gezogen), grosses Klassen-Icon rechts bekommt einen weichen Schein-Untergrund.
   ===================================================== */
.profile-avatar-wrap {
    background: radial-gradient(circle at 50% 35%, rgba(0,240,255,0.10), var(--ec-panel-active) 70%);
}
.xp-bar-wrap { max-width: 560px; }
.profile-tier-badge-large {
    filter: drop-shadow(0 0 18px rgba(0,240,255,0.22));
}

/* Trefferquote-Chart: war "gequetscht/langgezogen" (Nutzer-Feedback) -- Ursache war
   preserveAspectRatio="none" in Kombination mit fester 100px-CSS-Hoehe bei voller
   Container-Breite (renderActivityChart in app.js), das SVG wurde dadurch je nach
   Panel-Breite auf ein Vielfaches horizontal gestreckt, vertikal kaum. aspect-ratio
   erzwingt jetzt IMMER das Seitenverhaeltnis des viewBox (300x150), unabhaengig von
   der tatsaechlichen Breite -- keine Verzerrung mehr moeglich. */
.activity-chart-wrap {
    margin: var(--space-4) 0; padding: var(--space-4); border: 1px solid var(--ec-border-white);
    border-radius: var(--radius-sm); background: var(--ec-panel-elevated);
}
.activity-chart-title {
    font-family: var(--font-head); font-size: var(--text-xs); letter-spacing: 0.1em; color: var(--ec-text-tertiary);
    margin-bottom: var(--space-3); text-transform: uppercase;
}
.activity-chart-svg { width: 100%; aspect-ratio: 300 / 150; height: auto; max-height: 220px; display: block; }