/* =========================================================
   COMPONENTS -- generische, wiederverwendbare Bausteine (Panel, Stat-Kachel).
   Aus style.css extrahiert. Vorher gab es fuer .header-stat-tile DREI separate,
   teils widersprechende Definitionen in style.css (u.a. gleichzeitig
   flex-direction:column an einer und :row an anderer Stelle) -- konsolidiert auf
   eine einzige, eindeutige Definition (Master Brief Abschnitt 48: "eine Komponente
   = eine Quelle der Wahrheit").
   ========================================================= */

/* --- Panel --- */
/* Rand bewusst NEUTRAL im Ruhezustand (--ec-border-white), nicht cyan-getoent --
   ein cyan-getoenter Standard-Rand auf jedem Panel macht Cyan zur Wallpaper-Farbe
   statt einem bedeutungsvollen Akzent (Master Brief Abschnitt 2.4/9). */
.panel {
    padding: var(--space-4) var(--space-5); min-width: 0; position: relative;
    background: var(--ec-panel); border: 1px solid var(--ec-border-white); border-radius: var(--radius-md);
    box-shadow: 0 12px 40px rgba(0,0,0,.30);
}
/* Kopfzeile bleedet bis an den Panel-Rand (negativer Margin hebt das Panel-Padding
   exakt auf) und bekommt eine feste Hoehe + Trennlinie -- liest sich wie eine echte
   Tabellen-/Werkzeugleisten-Kopfzeile statt einer freien Ueberschrift im Fliesstext.
   Ersetzt die reine Text+Strich-Optik von vorher; konsistent auf jedem .panel im
   ganzen Produkt, nicht nur im Profil. */
.panel h3 {
    height: 48px; margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-5)) var(--space-4);
    padding: 0 var(--space-5); border-bottom: 1px solid var(--ec-border-white);
    font-size: var(--text-sm); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ec-text-primary);
    font-family: var(--font-head); display: flex; align-items: center; gap: var(--space-2);
}
.panel h3::before { content: ''; width: 3px; height: 12px; background: var(--ec-cyan); flex-shrink: 0; }

/* --- Stat-Kachel (Master Brief Abschnitt 21) --- */
.header-stat-tile {
    display: flex; flex-direction: row; align-items: center; gap: var(--space-3); min-width: 0;
    border: 1px solid var(--ec-border-white); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4);
    background: var(--ec-panel-elevated);
}
/* Bewusst EINE Farbe (Cyan) fuer alle Icon-Kreise statt einer Cyan/Pink/Gold-Rotation
   nach Kachel-Position -- die Rotation stand fuer nichts Echtes (Abschnitt 2.4/48:
   "keine zufaelligen Farben"). Gold bleibt fuer echte Prestige-Momente reserviert,
   Pink fuer Wettbewerb/Rivalen. */
.header-stat-tile .stat-icon {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
    background: rgba(0,240,255,0.14); color: var(--ec-cyan);
}
.header-stat-tile .stat-icon svg { width: 18px; height: 18px; }
.header-stat-tile .stat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.header-stat-tile .stat-label {
    font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 1px; color: var(--ec-text-tertiary);
    text-transform: uppercase; white-space: normal; line-height: 1.25; word-break: normal; overflow-wrap: break-word;
}
.header-stat-tile .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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}