/* ============================================================================
 * DASH-SECTION — Der Abschnittsrahmen (Kopfzeile + Titel + Aktion rechts)
 * ----------------------------------------------------------------------------
 * Bis 14.08.2026 lagen diese Regeln in css/dashboard-page.css. Das ging gut,
 * solange nur dashboard.html den Rahmen benutzte. Seit js/ui/werkbank.js ihn
 * ausgibt, erscheint er auch im Untergrund (Old Krenks Werkbank) — und dort
 * war er komplett ungestylt: Browser-Schwarz auf dem braunen Gewoelbe.
 *
 * Deshalb Umzug statt Kopie (eine Quelle der Wahrheit): Die Basis liegt hier,
 * geladen von dashboard.html UND untergrund.html. Seiten-Feinheiten wie
 * `.dash-page .dash-section` bleiben in dashboard-page.css — sie gewinnen
 * ueber ihre Spezifitaet (0,2,0), nicht ueber die Ladereihenfolge.
 * ========================================================================== */

.dash-section {
  margin-top: var(--tc-space-6, 24px);
}

.dash-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--tc-space-3, 12px);
  margin-bottom: var(--tc-space-3, 12px);
  padding-bottom: var(--tc-space-2, 8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.dash-section__title {
  margin: 0;
  font-family: var(--tc-font-display, 'Cinzel', serif);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--tc-highlight, #d4c4a0);
}

.dash-section__more,
.dash-section__hint {
  font-size: 0.8rem;
  color: var(--tc-text-muted, #888);
  text-decoration: none;
  white-space: nowrap;
}

.dash-section__more {
  /* Touch-Ziel: Der Link steht allein in der Kopfzeile und muss am Handy
     ohne Zielen treffbar sein (Heuristik 5). */
  display: inline-flex;
  align-items: center;
  min-height: var(--tc-touch-min, 36px);
  padding: 0 4px;
  transition: color 160ms ease;
}

.dash-section__more:hover,
.dash-section__more:focus-visible {
  color: var(--tc-highlight, #d4c4a0);
}

/* Die Aktion rechts darf auch ein <button> sein (z.B. "Ziel setzen" an der
   Werkbank) — dann soll er aussehen wie der Link daneben. */
button.dash-section__more {
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

@media (max-width: 600px) {
  .dash-section__head { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .dash-section__more { transition: none; }
}