/* ============================================================
   TRINITY SKILLS ACADEMY — UI-SCHICHT
   trinity-ui.css

   Die Bausteine, die Website und Coaching-App gemeinsam nutzen.
   Jeder Wert hier ist aus der bestehenden Website abgeleitet —
   nichts ist neu erfunden.

   Reihenfolge beim Einbinden ist zwingend:
     1. colors_and_type.css   (Farben, Schriften, Abstände)
     2. trinity-ui.css        (diese Datei)

   REGEL: Diese Datei wird in beiden Projekten NICHT verändert.
   Projektspezifisches gehört in eine eigene Datei danach.
   ============================================================ */

/* ── Grundlage ──────────────────────────────────────────────*/
.t-page {
  background: var(--cream);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

/* Themen-Umschaltung. Auf einen Abschnitt setzen, alles darin folgt.
   Die Fläche bleibt bewusst immer Cream — nur Anker, Akzent und
   Tönung wechseln. Genau das hält alles zusammen.

   Ohne data-topic folgen die Farben dem Coach-Branding (--c-*, von
   brand.js gesetzt) und fallen auf Trinity zurück. So bleibt die
   App für andere Coaches umfärbbar.

   Ein ausdrückliches data-topic gewinnt immer — Marina und Nicole
   sind Trinity-eigene Bereiche und werden nicht umgefärbt. */
.t-page,
[data-topic] {
  --t-anchor: var(--c-primary,    var(--anchor));
  --t-accent: var(--c-accent,     var(--accent));
  --t-tint:   var(--c-accent-tint, var(--accent-tint));
}
/* Hormone = Standardbereich, folgt dem Coach-Branding */
[data-topic="hormone"] {
  --t-anchor: var(--c-primary,     #A88950);
  --t-accent: var(--c-accent,      #4A1F26);
  --t-tint:   var(--c-accent-tint, #E9C9CC);
}
/* Feste Trinity-Bereiche */
[data-topic="mental"]    { --t-anchor:#8f86b8; --t-accent:#3A2C52; --t-tint:#DAD3EC; }
[data-topic="nutrition"] { --t-anchor:#7E9473; --t-accent:#2C4A32; --t-tint:#D6E3CE; }
/* Männer-Formulare — feste Blaugebung, wie in App und „Mein Plan" etabliert */
[data-topic="mann"]      { --t-anchor:#3E6488; --t-accent:#20415C; --t-tint:#C9D9E9; }

/* ── Abschnitt ──────────────────────────────────────────────*/
.t-section       { padding: var(--space-20) var(--space-6); }
.t-section--dark { background: var(--surface-dark); color: var(--cream); }
.t-container     { max-width: 1100px; margin: 0 auto; }
.t-container--narrow { max-width: 720px; margin: 0 auto; }

/* ── Abschnittskopf: Eyebrow → Titel → Goldstrich ───────────
   Diese Dreierfolge ist die Signatur der Marke. Immer vollständig. */
.t-eyebrow {
  display: inline-block;
  font: 600 11px var(--font-sans);
  letter-spacing: 0.18em;
  color: var(--gold-mid);
  background: var(--surface-dark);
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  margin-bottom: var(--space-5);
}
.t-section--dark .t-eyebrow { background: rgba(232,221,207,0.12); }

.t-title {
  font: 600 32px var(--font-serif);
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px;
}
.t-section--dark .t-title { color: var(--cream); }

.t-goldbar {
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--champagne), var(--gold));
  margin: 0 auto var(--space-12);
}
.t-goldbar--left { margin-left: 0; margin-right: auto; }

/* Zitat — Dancing Script, hier und für hervorgehobene Sätze */
.t-quote {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.4;
  color: var(--t-accent);
}

/* ── Karte ──────────────────────────────────────────────────*/
.t-card {
  background: linear-gradient(90deg,
              var(--t-tint) 55%,
              color-mix(in srgb, var(--t-tint) 74%, transparent) 100%);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 22px 38px -12px rgba(12,13,7,0.32),
              0 6px 12px rgba(12,13,7,0.12),
              inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.t-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 32px 52px -16px rgba(12,13,7,0.40),
              0 8px 16px rgba(12,13,7,0.16),
              inset 0 1px 0 rgba(255,255,255,0.55);
}

/* schlichte Variante ohne Tönung — für Formulare und Listen */
.t-card--plain {
  background: var(--color-bg-card);
  box-shadow: var(--shadow-md);
}

/* hervorgehobene Variante, dunkel */
.t-card--featured {
  background: linear-gradient(90deg,
              var(--surface-dark) 55%,
              color-mix(in srgb, var(--surface-dark) 80%, transparent) 100%);
  border: 1px solid rgba(168,137,80,0.25);
  box-shadow: 0 24px 44px -14px rgba(74,31,38,0.52),
              0 6px 12px rgba(74,31,38,0.24),
              inset 0 1px 0 rgba(255,255,255,0.12);
}
.t-card--featured:hover { transform: translateY(-6px); }

/* Farbleiste am Kartenkopf — Anker → Akzent, 6px */
.t-card__rule {
  height: 6px;
  background: linear-gradient(90deg, var(--t-anchor), var(--t-accent));
}
.t-card__body  { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.t-card__title { font: 700 14px var(--font-sans); line-height: 1.45; color: var(--ink); margin: 0 0 3px; }
.t-card__lead  { font: 700 11px var(--font-sans); color: var(--t-accent); margin-bottom: 10px; }
.t-card__text  { font: 400 13px var(--font-sans); line-height: 1.65; color: var(--color-text-secondary); }

.t-card--featured .t-card__title { color: var(--cream); text-shadow: 0 1px 8px rgba(12,13,7,0.75); }
.t-card--featured .t-card__lead  { color: var(--t-tint);  text-shadow: 0 1px 8px rgba(12,13,7,0.75); }
.t-card--featured .t-card__text  { color: var(--color-text-muted); text-shadow: 0 1px 8px rgba(12,13,7,0.7); }

/* ── Aufzählung mit Punkt in Themenfarbe ────────────────────*/
.t-list { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; padding: 0; list-style: none; }
.t-list li {
  display: flex; align-items: flex-start; gap: 9px;
  font: 400 12px var(--font-sans); line-height: 1.45;
  color: var(--color-text-secondary);
}
.t-list li::before {
  content: ''; flex-shrink: 0; margin-top: 5px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--t-accent);
}
.t-card--featured .t-list li          { color: rgba(232,221,207,0.82); }
.t-card--featured .t-list li::before  { background: var(--t-tint); }

/* ── Preis ──────────────────────────────────────────────────*/
.t-price      { font: 800 22px var(--font-sans); color: var(--t-accent); }
.t-price__note{ font: 400 11px var(--font-sans); color: var(--color-text-muted); margin-top: 3px; }
.t-card--featured .t-price       { color: var(--gold-mid); }
.t-card--featured .t-price__note { color: rgba(232,221,207,0.7); }

/* ── Buttons ────────────────────────────────────────────────
   Drei Stufen, mehr nicht. */
.t-btn {
  display: inline-block; box-sizing: border-box;
  font: 700 11px var(--font-sans);
  letter-spacing: 0.08em;
  padding: 11px 20px;
  border: none; border-radius: var(--radius-pill);
  cursor: pointer; text-align: center; text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}
.t-btn:active { transform: scale(0.97); }
.t-btn--block { display: block; width: 100%; }

.t-btn--primary   { background: var(--t-accent); color: var(--white); }
.t-btn--primary:hover { box-shadow: var(--shadow-gold); filter: brightness(1.12); }

.t-btn--anchor    { background: var(--t-anchor); color: var(--white); }
.t-btn--anchor:hover  { box-shadow: var(--shadow-gold); filter: brightness(1.08); }

.t-btn--outline   { background: transparent; color: var(--t-accent); border: 1px solid var(--t-anchor); }
.t-btn--outline:hover { background: var(--t-tint); }

.t-btn:disabled   { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ── Badge für Themen ───────────────────────────────────────
   Montserrat Alternates ist AUSSCHLIESSLICH hier erlaubt. */
.t-badge {
  display: inline-block;
  font: 700 9px var(--font-sans-alt);
  letter-spacing: 0.16em;
  color: var(--white);
  background: color-mix(in srgb, var(--t-accent) 75%, white 25%);
  border-radius: var(--radius-sm);
  padding: 4px 9px;
}
.t-card--featured .t-badge { background: var(--t-accent); }

/* Gold-Textbadge für Hinweise wie „Jetzt verfügbar" */
.t-badge--gold {
  background: var(--gradient-gold);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-sans);
  letter-spacing: 0.14em;
  padding: 0;
}

/* ── Statusanzeigen — themenunabhängig ──────────────────────*/
.t-status {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font: 700 var(--text-xs) var(--font-sans);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}
.t-status--success { background: var(--status-success-bg); color: var(--status-success); }
.t-status--error   { background: var(--status-error-bg);   color: var(--status-error); }
.t-status--warning { background: var(--status-warning-bg); color: var(--status-warning); }

/* ── Link ───────────────────────────────────────────────────*/
.t-link { color: var(--t-accent); font-weight: 600; text-decoration: underline; }
.t-link:hover { color: var(--t-anchor); }
.t-section--dark .t-link { color: var(--t-tint); }

/* ── Formulare — für die App, im Ton der Website ────────────*/
.t-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.t-label {
  font: 700 11px var(--font-sans);
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
}
.t-input, .t-textarea, .t-select {
  font: 400 var(--text-base) var(--font-sans);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
.t-input:focus, .t-textarea:focus, .t-select:focus {
  outline: none;
  border-color: var(--t-anchor);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--t-anchor) 22%, transparent);
}
.t-input::placeholder, .t-textarea::placeholder { color: var(--color-text-muted); }
.t-textarea { min-height: 120px; resize: vertical; line-height: var(--leading-base); }
.t-hint  { font: 400 12px var(--font-sans); color: var(--color-text-muted); }
.t-error { font: 600 12px var(--font-sans); color: var(--status-error); }

/* Auswahl-Kachel für Fragebogen — Mindesthöhe 44px für Mobil */
.t-choice {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px;
  padding: 11px 16px;
  background: var(--white);
  border: 1px solid var(--cream-dark);
  border-radius: var(--radius-sm);
  font: 400 var(--text-base) var(--font-sans);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}
.t-choice:hover { border-color: var(--t-anchor); background: var(--color-bg-card); }
.t-choice[aria-checked="true"], .t-choice.is-selected {
  border-color: var(--t-accent);
  background: var(--t-tint);
  font-weight: 600;
}

/* ── Fortschrittsbalken ─────────────────────────────────────*/
.t-progress {
  height: 6px; border-radius: var(--radius-pill);
  background: var(--cream-dark); overflow: hidden;
}
.t-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--t-anchor), var(--t-accent));
  border-radius: var(--radius-pill);
  transition: width var(--duration-base) var(--ease-out);
}

/* ── Tabelle — für Laborwerte und Auswertungen ──────────────*/
.t-table { width: 100%; border-collapse: collapse; font: 400 13px var(--font-sans); }
.t-table th {
  text-align: left;
  font: 700 10px var(--font-sans);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 10px 12px;
  border-bottom: 2px solid var(--t-anchor);
}
.t-table td { padding: 11px 12px; border-bottom: 1px solid var(--cream-dark); color: var(--color-text-secondary); }
.t-table tbody tr:hover { background: color-mix(in srgb, var(--t-tint) 40%, transparent); }

/* ── Trennlinie ─────────────────────────────────────────────*/
.t-divider { height: 1px; background: var(--cream-dark); border: none; margin: var(--space-8) 0; }

/* ── Sanftes Einblenden beim Scrollen ───────────────────────*/
.t-fade { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.t-fade.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .t-fade { opacity: 1; transform: none; transition: none; }
  .t-card, .t-btn { transition: none; }
  .t-card:hover, .t-card--featured:hover { transform: none; }
}

/* ── Mobil ──────────────────────────────────────────────────*/
@media (max-width: 640px) {
  .t-section { padding: var(--space-12) var(--space-5); }
  .t-title   { font-size: 24px; }
  .t-btn     { min-height: 44px; }   /* Fingerfreundlich */
}