/* Gehirnfunktionen (Eigentümer 28.09.2026, Punkt 4): vier klar gestaltete Karten oben auf der
   Avatar-Seite - gleiche Designsprache wie die Stufenkarten aus brain-stages.css (dunkle Karte,
   farbiger Leuchtrand, Nummer im Kreis), eigene Klassen, damit brain-stages.css unangetastet bleibt.
   Feste Farbpalette wie dort (Stufenfarben Thema/Gedanke/Prozess/Stimmung), keine Theme-Variablen
   für die Karten selbst - bewusst dieselbe dunkle Neon-Optik unabhängig vom gewählten App-Design. */
#brainFunctions>.eyebrow{display:block;padding:16px 16px 8px;margin:0}
/* Eigene Kartenoptik nur, solange die Seite noch nicht von settings-nav.mjs in Bereiche sortiert
   wurde (Rückfall ohne JS-Modul); danach übernimmt die Bereichs-Karte drumherum dieses Aussehen.
   Deshalb an der Klasse und dem direkten Kind-Kombinator festgemacht, nicht an der id allein:
   nach dem Verschieben steckt #brainFunctions nicht mehr direkt in #settings, die Regel greift
   dann bewusst nicht mehr (keine doppelt verschachtelte Karte). */
#settings>.brain-functions-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin:16px 0}
.brain-fn-grid{display:flex;flex-direction:column;gap:10px;padding:0 16px 14px}
.brain-fn-card{
  --fn-c: #A78BFA;
  position:relative;display:grid;grid-template-columns:32px 36px minmax(0,1fr) auto;align-items:center;gap:10px;
  width:100%;min-height:64px;padding:10px 12px;border:1.5px solid var(--fn-c);border-radius:16px;
  background:linear-gradient(180deg,rgba(20,24,33,.92),rgba(9,11,16,.94));
  box-shadow:0 0 10px color-mix(in srgb,var(--fn-c) 35%,transparent),inset 0 0 16px color-mix(in srgb,var(--fn-c) 8%,transparent);
  color:#f3f5f9;text-align:left;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;
}
.brain-fn-card:hover,.brain-fn-card:focus-visible{transform:translateY(-1px);box-shadow:0 0 16px color-mix(in srgb,var(--fn-c) 55%,transparent),inset 0 0 20px color-mix(in srgb,var(--fn-c) 14%,transparent)}
.brain-fn-card:focus-visible{outline:2px solid var(--fn-c);outline-offset:2px}
.brain-fn-num{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--fn-c);color:var(--fn-c);
  display:grid;place-items:center;font-weight:700;font-size:13px;background:rgba(0,0,0,.35);
  box-shadow:0 0 8px color-mix(in srgb,var(--fn-c) 40%,transparent)}
.brain-fn-icon{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--fn-c);color:var(--fn-c);
  background:color-mix(in srgb,var(--fn-c) 14%,rgba(0,0,0,.4));display:grid;place-items:center;
  box-shadow:0 0 8px color-mix(in srgb,var(--fn-c) 40%,transparent)}
.brain-fn-icon svg{width:20px;height:20px}
.brain-fn-text{display:flex;flex-direction:column;gap:2px;min-width:0;font-weight:650}
.brain-fn-text small{color:#a8b0c0;font-weight:400;font-size:12px;line-height:1.35;overflow-wrap:anywhere}
.brain-fn-chevron{color:var(--fn-c);font-size:16px}
/* Claude 28.09.2026: Link „Gehirn ansehen (Netz-Ansicht)“ entfernt – nur noch ein Gehirn. */
/* Kartenfarben - dieselben vier Stufenfarben wie in brain-stages.css (Thema/Gedanke/Prozess/Stimmung). */
#brainFnLive{--fn-c: #A78BFA}
#brainFnStages{--fn-c: #22D3EE}
#brainFnOrders{--fn-c: #4ADE80}
#brainFnMore{--fn-c: #FF8A1A}
@media (min-width:480px){
  .brain-fn-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .brain-fn-card{transition:none}
}
/* Claude 29.09.2026: Seite 4 „Weitere Avatareinstellungen“ – dieselben Karten, Farbe je Karte über --fn-c. */
.brain-fn-card[hidden]{display:none}
.avatar-more-area .brain-fn-grid{padding:12px 0 4px}
/* Farben je Karte (Inline-Stile verbietet die Sicherheitsrichtlinie der Seite). */
.brain-fn-card[data-avatar-more="avatar"]{--fn-c: #F472B6}
.brain-fn-card[data-avatar-more="voice"]{--fn-c: #FACC15}
.brain-fn-card[data-avatar-more="memory"]{--fn-c: #A78BFA}
.brain-fn-card[data-avatar-more="autonomy"]{--fn-c: #4ADE80}
.brain-fn-card[data-avatar-more="disponent"]{--fn-c: #FF8A1A}
.brain-fn-card[data-avatar-more="quota"]{--fn-c: #22D3EE}
/* Claude 29.09.2026 (Dirigent Etappe 9.1): Karte „Dirigent“ unter Gehirnfunktionen (Farbe wie Disponent, Leuchtstil). */
#brainFnDirigent{--fn-c: #F472B6}