/* konto-kopf.css (22.10.2026, RC101)
   Kopfleiste der Kontoseiten wie im Dashboard. Die Regeln sind 1:1 aus dem
   <style>-Block von dashboard.html uebernommen (Zeilen 715-768, 844-878,
   888-965); jeder Selektor haengt an .ux0505-header--account. Wird NUR von
   den Kontoseiten NACH ux0505-integration.css geladen. */

  /* --- Wortmarke mit Slogan --------------------------------------------
     .ux0505-brand > span ist im gemeinsamen Blatt das petrolfarbene Quadrat
     mit dem T (2,2rem, Georgia, weisse Schrift). Der Textblock ist ein
     ZWEITES > span und wuerde dieselbe Regel erben — darum hier
     ausdruecklich zurueckgenommen, Eigenschaft fuer Eigenschaft. */
  .ux0505-header .ux0505-brand > span.tc-brand__text {
    display: flex; flex-direction: column; align-items: flex-start;
    place-items: initial; width: auto; height: auto;
    background: none; border-radius: 0; color: inherit;
    font: inherit; line-height: 1.2; gap: .05rem;
  }
  .ux0505-header .tc-brand__slogan {
    font-size: .72rem; font-weight: 400; line-height: 1.25;
    color: var(--ux-muted); white-space: nowrap;
  }

  /* --- Kontonavigation: Tastenform ---------------------------------------
     WIEDERHERGESTELLT 08.09.2026 (zweite Hand, Treffer 1). Diese zwei Zeilen
     standen im ersten Wurf zusammen mit der Schwebe-Regel und gingen beim
     Umsortieren mit ihr verloren - die Schwebeflaeche lag danach als
     59x26-px-Kasten eng am Text. Sie sind KEIN Schwebezustand und stehen
     deshalb hier bei den Grundregeln. */
  .ux0505-header--account nav#ux0505Nav a {
    border-radius: var(--tc-radius-sm);
    padding: .35rem .55rem;
  }

  /* --- Nutzer-Chip: Initialen, E-Mail, Abmelden ------------------------- */
  .ux0505-header--account .a-user { display: inline-flex; align-items: center; gap: .5rem; }
  .ux0505-header--account .a-avatar {
    display: grid; place-items: center; flex: none;
    width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: var(--ux-teal); color: var(--ux-on-teal);
    font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  }
  .ux0505-header--account .a-avatar:empty { display: none; }
  .ux0505-header--account .a-user-meta {
    display: flex; flex-direction: column; align-items: flex-start;
    line-height: 1.25; min-width: 0;
  }
  .ux0505-header--account .a-user-meta__mail {
    max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: .72rem; color: var(--ux-muted);
  }
  .ux0505-header--account .a-user-meta__mail:empty { display: none; }
  /* Zielgroesse (WCAG 2.2, 2.5.8): 1,75rem = 28 px, ueber der 24-px-Schwelle.
     Derselbe Wert, den das Projekt schon fuer die Rechtstext-Verzeichnisse
     gewaehlt hat (ux0505-integration.css, Abschnitt „Zielgroesse“). */
  .ux0505-header--account .ux0505-header__tools .a-user-meta .tc-btn {
    min-height: 1.75rem; padding: .1rem .3rem; margin-left: -.3rem;
    border: 0; background: none;
    font-size: .84rem; font-weight: 650; color: var(--ux-ink);
    border-radius: var(--tc-radius-sm);
  }

  /* --- Schwebezustaende in der Kopfleiste -------------------------------
     Befund aus dem Bericht: "bei Mouseover passiert optisch nichts". Ursache
     gemessen: .tc-header__nav a:hover (titancore.css:436) trifft die
     Kontonavigation nicht - die heisst hier #ux0505Nav. Und .tc-iconbtn:hover
     (titancore.css:343) hat dieselbe Spezifitaet wie
     .ux0505-header__tools .tc-iconbtn, das spaeter geladen wird und Farbe und
     Rand zurueckdreht.
     ⚠ DESHALB STEHT DIESER ABSCHNITT GANZ AM ENDE: die Grundregeln oben haben
     zum Teil dieselbe Spezifitaet, und bei Gleichstand entscheidet die
     Reihenfolge. Erste Fassung stand davor - die Karte drehte den
     Schwebegrund wieder auf `none` zurueck. */
  .ux0505-header--account nav#ux0505Nav a:hover,
  .ux0505-header--account nav#ux0505Nav a:focus-visible {
    background: var(--ux-surface-hover);
    color: var(--ux-teal-dark);
  }
  .ux0505-header--account .ux0505-header__tools .tc-iconbtn:hover,
  .ux0505-header--account .ux0505-header__tools .tc-iconbtn:focus-visible {
    background: var(--ux-surface-hover);
    color: var(--ux-teal-dark);
    border-color: var(--ux-teal);
  }
  .ux0505-header--account .ux0505-header__tools .a-user-meta .tc-btn:hover,
  .ux0505-header--account .ux0505-header__tools .a-user-meta .tc-btn:focus-visible {
    color: var(--tc-err);
    background: var(--ux-surface-hover);
    text-decoration: underline;
  }
  @media (prefers-reduced-motion: no-preference) {
    .ux0505-header--account nav#ux0505Nav a,
    .ux0505-header--account .ux0505-header__tools .tc-iconbtn,
    .ux0505-header--account .ux0505-header__tools .a-user-meta .tc-btn {
      transition: background-color .12s ease, color .12s ease, border-color .12s ease;
    }
  }

  /* --- Trennstriche zwischen den vier verbliebenen Hauptnav-Punkten ----- */
  .ux0505-header--account nav#ux0505Nav.a-nav2 a {
    border-right: 1px solid var(--ux-line);
  }
  .ux0505-header--account nav#ux0505Nav.a-nav2 a:last-child { border-right: none; }
  @media (max-width: 60rem) {
    /* Im aufgeklappten Mobilmenue steht die Nav als Raster (siehe
       ux0505-integration.css, max-width:60rem) — ein rechter Rand pro Zeile
       ist dort keine Trennung mehr, nur ein einzelner Strich am Rand. */
    .ux0505-header--account nav#ux0505Nav.a-nav2 a { border-right: none; }
  }

  /* --- Guthaben-Nav-Punkt zweizeilig: "Guthaben" / "Aufladen" ------------ */
  .nav-guthaben { display: flex; flex-direction: column; justify-content: center; line-height: 1.2; gap: .05rem; }
  .nav-guthaben .sub2 {
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--ux-teal-dark);
  }

  /* --- Guthaben-Karte gestapelt: Token oben klein, Euro unten gross ------
     ERSETZT die vorherige .a-balance (nebeneinander). Der Reload-Knopf
     bleibt dasselbe Element (#tcCreditsRefresh), zieht nur an den Anfang der
     Karte. #tcCreditsChip/#tcCreditsHeader behalten ihre Ids und damit jede
     bestehende Skriptbindung (loadCredits, Gastmodus-innerHTML) — neu ist
     nur #tcCreditsTokens fuer die Tokenzeile, siehe Skriptaenderung unten. */
  .ux0505-header--account .a-balance2 {
    display: inline-flex; align-items: center; gap: .3rem;
    border: 1px solid var(--ux-line); border-radius: 999px;
    background: var(--ux-surface);
    padding: .2rem .7rem .2rem .2rem;
    max-width: 100%; min-width: 0;
  }
  .ux0505-header--account .a-balance2 #tcCreditsRefresh {
    width: 1.8rem; height: 1.8rem; min-width: 1.8rem; min-height: 1.8rem;
    flex: none; border-color: transparent; background: none;
  }
  .ux0505-header--account .a-balance2__stack {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0; min-width: 0;
  }
  .ux0505-header--account .a-balance2 .tok2 {
    font-size: .68rem; color: var(--ux-muted); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  .ux0505-header--account .a-balance2 #tcCreditsChip {
    border: 0; background: none; padding: 0;
    font-size: .85rem; color: var(--ux-ink);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ux0505-header--account .a-balance2 #tcCreditsChip strong { color: var(--ux-ink); font-weight: 700; }
  .ux0505-header--account .a-balance2 #tcCreditsChip a { color: var(--ux-teal-dark); }
  .ux0505-header--account .ux0505-header__tools .a-balance2 #tcCreditsRefresh:hover,
  .ux0505-header--account .ux0505-header__tools .a-balance2 #tcCreditsRefresh:focus-visible {
    background: var(--ux-surface-hover); color: var(--ux-teal-dark); border-color: var(--ux-teal);
  }
  @media (prefers-reduced-motion: no-preference) {
    .ux0505-header--account .ux0505-header__tools .a-balance2 #tcCreditsRefresh {
      transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .2s ease;
    }
    .ux0505-header--account .ux0505-header__tools .a-balance2 #tcCreditsRefresh:hover { transform: rotate(75deg); }
  }

  /* --- Theme-Umschalter + Einstellungen-Zahnrad: klein, uebereinander ----
     WARNUNG (Auftrag, KORREKTUR 10.09.): das Halbmond-SVG kommt aus
     titancore.js (icon()/applyTheme(), Klasse .tc-icon) und wird bei jedem
     Themenwechsel per innerHTML neu gesetzt — hier wird NUR seine Groesse
     per CSS auf 17px gezogen, sein Innenleben bleibt unangetastet. Das
     Zahnrad ist ein neues statisches SVG ohne .tc-icon-Klasse, deshalb die
     zweite, generische Regel fuer sein <svg>. */
  .mini-stack { display: flex; flex-direction: column; gap: .3rem; }
  .ux0505-header--account .ux0505-header__tools .mini-stack .mini-icon {
    width: 1.0625rem; height: 1.0625rem; min-width: 1.0625rem; min-height: 1.0625rem;
    padding: 0; border-radius: 50%; flex: none;
  }
  .mini-stack .mini-icon .tc-icon { width: .6rem; height: .6rem; }
  .mini-stack .mini-icon svg { width: 9px; height: 9px; display: block; }
  /* Farb-/Randwechsel beim Schweben erbt .mini-icon bereits ueber die
     gemeinsame Klasse .tc-iconbtn von der Regel weiter oben — hier nur die
     Groesse, keine doppelte Schwebe-Regel. */