/* Webseite Trinity Skills Academy · Grundlage (Stil B «Wegweiser», live seit Nov. 2026).
   Farben nur aus colors_and_type.css. Schriften: Montserrat, Cinzel Decorative, Dancing Script. */
@import url('../_ds/trinity-skills-academy-2eb2d15d-c4d0-4f65-81d2-10722d78ab77/colors_and_type.css');


:root {
  /* Drei Menschen, drei Farben. Alles andere ist Ink, Cream und Gold im Verlauf. */
  --j: var(--topic-hormone-accent);   --j-hell: var(--topic-hormone-tint);
  --m: var(--topic-mental-accent);    --m-hell: var(--topic-mental-tint);
  --n: var(--topic-nutrition-accent); --n-hell: var(--topic-nutrition-tint);
  --papier: var(--color-bg-card);
  --leise: var(--color-text-secondary);
  --linie: var(--cream-dark);
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --zier: 'Cinzel Decorative', Georgia, serif;
  --hand: 'Dancing Script', 'Segoe Script', cursive;
  --kopf-h: 68px;
  --breite: 1320px;
  --gut-l: max(20px, env(safe-area-inset-left, 0px));
  --gut-r: max(20px, env(safe-area-inset-right, 0px));
  --weich: cubic-bezier(0.22, 1, 0.36, 1);
  --schwung: cubic-bezier(0.65, 0, 0.35, 1);
}
@media (min-width: 760px) { :root { --gut-l: max(40px, env(safe-area-inset-left, 0px)); --gut-r: max(40px, env(safe-area-inset-right, 0px)); } }
@media (max-width: 760px) { :root { --kopf-h: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 12px); }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
h1, h2, h3 { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: normal; line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
ol, ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--anchor); outline-offset: 3px; border-radius: 4px; }
.innen { max-width: var(--breite); margin-inline: auto; padding-left: var(--gut-l); padding-right: var(--gut-r); }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.springen { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--cream); color: var(--ink); padding: 10px 16px; border-radius: 8px; font-weight: 600; }
.springen:focus { top: 12px; }

/* Etiketten und Gold */
.etikett { text-wrap: balance; font-family: var(--sans); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.goldtext { background: var(--gradient-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.goldknopf { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--gradient-gold); color: var(--ink); font-family: var(--sans); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--anchor) 80%, transparent); transition: translate 300ms var(--weich), box-shadow 300ms var(--weich); }
.goldknopf:hover { translate: 0 -2px; box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--anchor) 95%, transparent); }
.pfeil { display: inline-block; transition: translate 300ms var(--weich); }
a:hover > .pfeil, a:focus-visible > .pfeil { translate: 5px 0; }

/* Kopf: immer schwarz, Name im Goldverlauf */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--ink); }
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--ink); color: var(--cream); }
.kopf-innen { max-width: var(--breite); margin-inline: auto; height: var(--kopf-h); padding-left: var(--gut-l); padding-right: var(--gut-r); display: flex; align-items: center; gap: 28px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; min-height: 44px; }
.marke img { width: 34px; height: 34px; }
.marke span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.kopf nav { display: flex; gap: clamp(16px, 2.2vw, 30px); }
.kopf nav a { font-size: 0.82rem; color: color-mix(in srgb, var(--cream) 80%, transparent); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; transition: color 200ms; }
.kopf nav a:hover { color: var(--gold-mid); }
.kopf .goldknopf { min-height: 40px; padding: 0 18px; font-size: 0.7rem; }
@media (max-width: 900px) { .kopf nav { display: none; } }
@media (max-width: 420px) { .marke span { display: none; } }

/* Fuss */
.fuss { background: var(--ink); color: color-mix(in srgb, var(--cream) 70%, transparent); font-size: 0.82rem; }
.fuss-innen { max-width: var(--breite); margin-inline: auto; padding: 44px var(--gut-r) calc(96px + env(safe-area-inset-bottom, 0px)) var(--gut-l); display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; align-items: center; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.fuss a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.fuss a:hover { color: var(--gold-mid); }

/* Erscheinen beim Scrollen. Ohne JS oder bei «weniger Bewegung» ist alles sofort da. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-zeige] { opacity: 0; translate: 0 28px; transition: opacity 1000ms var(--weich), translate 1000ms var(--weich); transition-delay: calc(var(--i, 0) * 110ms); }
  .js [data-zeige].in { opacity: 1; translate: none; }
}

/* Text, der beim Lesen aufleuchtet: Wort für Wort, an die Scrollposition gebunden (Chrome, Edge, Safari 26). */
@keyframes wort-an { from { opacity: 0.22; } to { opacity: 1; } }
@supports ((animation-timeline: view()) and (animation-range: entry)) {
  @media (prefers-reduced-motion: no-preference) {
    [data-woerter] .wort { animation: wort-an linear both; animation-timeline: view(); animation-range: entry 85% cover 42%; }
  }
}
.woerter-ersatz .wort { opacity: 0.22; transition: opacity 700ms ease; }
.woerter-ersatz.an .wort { opacity: 1; }