/* ============================================================================
 * panel.css - tc-panel
 * ----------------------------------------------------------------------------
 * SCHICHT 1 (geteilter Organismus). Gerahmte Sektion mit Kopf (Medaillon-Icon
 * + Titel + optionalem Scope-Tag) und Body. Gibt Sektionen Tiefe + Fokus statt
 * "Liste auf schwarzem Grund". Ersetzt flache <section>-Bloecke in den Hubs.
 *
 * THEME-GETRIEBEN: alle Farben aus --tc-* / aktivem .theme-*.
 *
 * Struktur (BEM):
 *   .tc-panel                     Block (Surface + Border + Radius + Schatten)
 *     .tc-panel__header           Kopfzeile (Icon + Titel [+ Tabs/Scope])
 *       .tc-panel__icon           rundes Medaillon-Icon
 *       .tc-panel__titlewrap      Gruppe aus Titel + Scope (flex:1)
 *         .tc-panel__title        Cinzel-Kapitaelchen, Glanzfarbe
 *         .tc-panel__scope        kleiner Kontext-Tag (z.B. "Kriegsbanden")
 *     .tc-panel__body             Inhalt
 * ============================================================================ */

.tc-panel {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 140px),
    var(--tc-bg-surface-1);
  border: 1px solid var(--tc-border-default);
  border-radius: var(--tc-radius-xl, 16px);
  box-shadow: var(--tc-shadow-lg), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
}

.tc-panel__header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 17px 20px 14px;
  position: relative;
  flex-wrap: wrap;
}
.tc-panel__header::after {
  content: '';
  position: absolute;
  left: 20px; right: 20px; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(var(--tc-highlight-rgb), 0.5),
    rgba(var(--tc-secondary-rgb), 0.4) 55%,
    transparent);
}

.tc-panel__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  background: radial-gradient(circle at 32% 26%,
    rgba(var(--tc-highlight-rgb), 0.28),
    rgba(var(--tc-secondary-rgb), 0.4) 72%,
    rgba(0,0,0,0.45));
  border: 1px solid rgba(var(--tc-highlight-rgb), 0.35);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.55), 0 0 12px rgba(var(--tc-secondary-rgb), 0.25);
}

.tc-panel__titlewrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.tc-panel__title {
  margin: 0;
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tc-highlight);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  white-space: nowrap;
}

.tc-panel__scope {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tc-highlight);
  padding: 3px 9px;
  border-radius: var(--tc-radius-full, 9999px);
  background: rgba(var(--tc-accent-rgb), 0.1);
  border: 1px solid rgba(var(--tc-accent-rgb), 0.25);
  white-space: nowrap;
}

.tc-panel__body {
  padding: 18px 20px 20px;
}

/* === GEFAHR ================================================================
 * ⚠️ ERGAENZT AM 22.08.2026 (#246). Das Profil hat einen Abschnitt
 * „Gefahrenzone" (Abmelden, Konto loeschen) und faerbte dessen Kopfzeile
 * selbst rot — ueber `.danger-zone .profile-card-header`. Beim Umstieg auf
 * tc-panel waere diese Kennzeichnung ersatzlos verschwunden, und eine
 * Warnung ohne sichtbare Warnung ist aermer (§3).
 *
 * DATENFARBE, nicht Theme (§9): Rot bedeutet hier etwas ueber den INHALT
 * — hinter diesen Knoepfen gibt es kein Zurueck. Sie folgt deshalb nicht
 * dem Systemakzent.
 *
 * Bewusst zurueckhaltend: eingefaerbter Rand und Titel, KEINE rote Flaeche.
 * Ein Abschnitt, der schreit, wird ueberlesen wie jedes Dauerwarnsignal.
 * ========================================================================== */
.tc-panel--danger {
  border-color: rgba(244, 67, 54, 0.35);
}
.tc-panel--danger .tc-panel__header {
  border-bottom-color: rgba(244, 67, 54, 0.35);
}
.tc-panel--danger .tc-panel__title {
  color: #ef9a9a;
}