/* ══════════════════════════════════════════════════════════════
   PRAXEN — „Die Grenze, die zählt"

   Gleiche Mechanik wie offline-ki (Grenzlinie, zwei Wege), aber
   klinisch-ruhig statt technisch-blau, mit einem menschlichen
   Freigabepunkt DIREKT AUF der Linie — das hat offline-ki nicht.
   Keine Schloss-/Hacker-Symbolik.
══════════════════════════════════════════════════════════════ */

.trs {
  --trs-bg: #eef2ee;
  --trs-ink: #182019;
  --trs-mut: #5b6660;
  --trs-line: rgba(24, 32, 25, .15);
  --trs-sage: #4d765b;
  --trs-out: #9a6b3f;
  --trs-ease: cubic-bezier(.22, .9, .24, 1);

  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  background: var(--trs-bg); color: var(--trs-ink); overflow-x: clip;
}
.trs-wrap { width: min(1200px, 92vw); margin-inline: auto; position: relative; }

.trs-open { padding: clamp(5.5rem, 11vh, 8.5rem) 0 clamp(2rem, 5vh, 3rem); }
.trs-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-heading); font-size: .72rem; font-weight: 800;
  letter-spacing: .15em; text-transform: uppercase; color: var(--trs-sage); margin-bottom: 1.2rem;
}
.trs-eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: .55; }
.trs-h1 {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -.04em;
  line-height: 1.04; font-size: clamp(2rem, 5.2vw, 3.9rem); margin: 0 0 1rem; max-width: 19ch; text-wrap: balance;
}
.trs-h1 em { font-style: normal; color: var(--trs-sage); }
.trs-lead { margin: 0; max-width: 54ch; color: var(--trs-mut); line-height: 1.68; font-size: clamp(1rem,1.3vw,1.12rem); }

/* ── Der Schnitt ─────────────────────────────────────────────── */
.trs-stage { padding-bottom: clamp(3rem, 8vh, 5rem); }
.trs-pick { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.6rem; }
.trs-task {
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--font-body); font-size: .86rem;
  color: var(--trs-ink); background: #fff;
  border: 1px solid var(--trs-line); border-radius: 3px; padding: .5rem 1rem;
  transition: border-color .2s var(--trs-ease), background .2s var(--trs-ease);
}
.trs-task:hover { border-color: var(--trs-sage); }
.trs-task.is-on { background: var(--trs-ink); color: #fff; border-color: var(--trs-ink); font-weight: 600; }
.trs-task:focus-visible { outline: 2px solid var(--trs-sage); outline-offset: 2px; }

.trs-section { position: relative; height: clamp(360px, 52vh, 460px); border: 1px solid var(--trs-line); background: #fff; overflow: hidden; }
.trs-zone { position: absolute; left: 0; right: 0; display: flex; align-items: flex-start; padding: .6rem clamp(1rem,3vw,2rem); }
.trs-zone--out { top: 0; height: 40%; background: repeating-linear-gradient(135deg, rgba(154,107,63,.05) 0 6px, transparent 6px 12px); }
.trs-zone--in { bottom: 0; height: 60%; background: rgba(79,122,94,.035); }
.trs-zone__k { font-family: var(--font-heading); font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.trs-zone--out .trs-zone__k { color: var(--trs-out); }
.trs-zone--in .trs-zone__k { color: var(--trs-sage); }

.trs-edge { position: absolute; left: 0; right: 0; top: 40%; height: 0; border-top: 2px dashed var(--trs-ink); }

/* Freigabepunkt AUF der Linie — das hat offline-ki nicht */
.trs-gate {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .6rem .9rem; border-radius: 10px;
  background: #fff; border: 2px solid var(--trs-ink);
  cursor: pointer; font: inherit;
}
.trs-gate__k { font-family: var(--font-heading); font-weight: 800; font-size: .72rem; letter-spacing: .04em; }
.trs-gate__s { font-size: .64rem; color: var(--trs-mut); }
.trs-gate.is-open { border-color: var(--trs-sage); }
.trs-gate.is-open .trs-gate__k { color: var(--trs-sage); }
.trs-gate:focus-visible { outline: 2px solid var(--trs-sage); outline-offset: 3px; }

.trs-path { position: absolute; left: 50%; transform: translateX(-50%); width: min(86%, 720px); height: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem,4vw,3rem); align-items: center; }
.trs-lane { position: relative; height: 100%; }
.trs-lane__k { position: absolute; left: 0; bottom: 8%; font-family: var(--font-heading); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--trs-mut); }
.trs-pkt { position: absolute; left: 1.2rem; width: 12px; height: 12px; border-radius: 2px; bottom: 22%; transition: bottom 1.3s var(--trs-ease), background 1.3s var(--trs-ease); }
.trs-lane--ext .trs-pkt { background: var(--trs-sage); }
.trs-lane--int .trs-pkt { background: var(--trs-sage); }
.trs-section.is-run.is-approved .trs-lane--ext .trs-pkt { bottom: 78%; background: var(--trs-out); }
.trs-section.is-run .trs-lane--int .trs-pkt { bottom: 46%; }
.trs-section.is-run:not(.is-approved) .trs-lane--ext .trs-pkt { bottom: 40%; background: var(--trs-mut); }

.trs-say { margin: 1rem 0 0; font-size: .87rem; color: var(--trs-mut); line-height: 1.6; max-width: 70ch; min-height: 2.6em; }
.trs-say b { color: var(--trs-ink); }

/* ── Der Satz ────────────────────────────────────────────────── */
.trs-statement { padding: clamp(4rem,11vh,8rem) 0 clamp(3rem,8vh,5rem); }
.trs-statement p {
  margin: 0 auto; width: min(1200px, 92vw);
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -.042em;
  line-height: 1.04; font-size: clamp(1.8rem,5vw,3.7rem); max-width: 20ch; text-wrap: balance;
}
.trs-statement span { display: block; color: var(--trs-mut); }

.trs-more { padding-bottom: clamp(3rem,8vh,5rem); max-width: 68ch; }
.trs-more summary {
  cursor: pointer; list-style: none; font-family: var(--font-heading); font-weight: 700;
  font-size: 1rem; color: var(--trs-ink); padding: .9rem 0; border-top: 1px solid var(--trs-line);
  display: flex; justify-content: space-between; gap: 1rem;
}
.trs-more summary::-webkit-details-marker { display: none; }
.trs-more summary::after { content: "+"; color: var(--trs-sage); font-size: 1.2rem; line-height: 1; }
.trs-more[open] summary::after { content: "–"; }
.trs-more p { margin: 0 0 1rem; color: var(--trs-mut); line-height: 1.7; font-size: .95rem; }
.trs-more p b { color: var(--trs-ink); }

.trs-end { padding-bottom: clamp(5rem,12vh,8rem); }
.trs-end__t {
  font-family: var(--font-heading); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(1.5rem,3.2vw,2.4rem); line-height: 1.12; margin: 0 0 1.3rem; max-width: 24ch;
}
.trs-cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--trs-ink); color: #fff;
  font-family: var(--font-heading); font-weight: 700; font-size: .94rem;
  padding: .9rem 1.5rem; border-radius: 3px; text-decoration: none;
  transition: transform .22s var(--trs-ease), background .22s var(--trs-ease);
}
.trs-cta:hover { transform: translateY(-2px); background: var(--trs-sage); }
.trs-cta--ghost { background: transparent; color: var(--trs-ink); border: 1px solid var(--trs-line); margin-left: .55rem; }
.trs-cta--ghost:hover { background: rgba(24,32,25,.05); }
.trs-back { margin: 1.6rem 0 0; font-size: .87rem; color: var(--trs-mut); }
.trs-back a { color: var(--trs-sage); text-underline-offset: 3px; }

@media (max-width: 720px) {
  .trs-section { height: 420px; }
  .trs-path { width: 92%; grid-template-columns: 1fr; }
  .trs-lane--int { display: none; }
  .trs-section.is-local .trs-lane--ext { display: none; }
  .trs-section.is-local .trs-lane--int { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .trs-pkt { transition: none; }
}

/* ── Ruhige Leseebene (ersetzt Statement + Akkordeon + CTA-Band) ──
   Klinisch, still, einspaltig. Der „Wow"-Effekt dieser Seite ist
   Kontrolle, nicht Bewegung. */
.trs-quiet{border-top:1px solid var(--trs-line,rgba(0,0,0,.12));
  padding:clamp(3.5rem,9vh,6rem) 0 clamp(4rem,10vh,7rem);margin-top:clamp(2.5rem,6vh,4rem)}
.trs-quiet__in{width:min(64ch,90vw);margin-inline:auto}
.trs-quiet__lead{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.7;margin:0 0 1.4rem}
.trs-quiet__p{font-size:.96rem;line-height:1.8;margin:0 0 1.1rem;opacity:.8}
.trs-quiet__p b{opacity:1;font-weight:700}
.trs-quiet__hr{border:none;border-top:1px solid var(--trs-line,rgba(0,0,0,.12));margin:2.2rem 0}
.trs-quiet__q{font-family:var(--font-heading);font-weight:700;font-size:.92rem;margin:0 0 .3rem}
.trs-quiet__a{font-size:.9rem;line-height:1.72;opacity:.74;margin:0 0 1.3rem}
.trs-quiet__t{font-family:var(--font-heading);font-weight:800;letter-spacing:-.03em;
  font-size:clamp(1.2rem,2.6vw,1.75rem);line-height:1.2;margin:0 0 1rem;max-width:26ch}
.trs-quiet__go{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-heading);font-weight:700;font-size:.88rem;
  text-decoration:none;padding:.66rem 1.2rem;border-radius:999px;margin-right:.5rem}
.trs-quiet__rel{margin:1.2rem 0 0;font-size:.84rem;opacity:.66}

/* Links in der ruhigen Leseebene: ohne diese Regel fielen sie auf das
   Browser-Standardblau (#0000EE) zurück — auf diesem Grund unlesbar. */
.trs-quiet__p a, .trs-quiet__a a, .trs-quiet__rel a, .trs-quiet__lead a {
  color: var(--trs-sage); text-underline-offset: 3px;
}

/* Kontrast auf WCAG AA angehoben (Batch 5, gemessen bei 390px). */


/* Final Creative Direction · Batch C */
.trs-section{isolation:isolate;background:radial-gradient(ellipse at 72% 78%,rgba(132,190,158,.13),transparent 40%),linear-gradient(180deg,#fbfdfc,#f4faf6);box-shadow:inset 0 0 0 8px rgba(79,122,94,.025),0 28px 70px rgba(53,82,63,.1)}.trs-zone--out{background:linear-gradient(180deg,rgba(226,216,201,.22),rgba(255,255,255,.72))}.trs-zone--in{background:linear-gradient(180deg,rgba(215,238,222,.22),rgba(239,248,242,.72))}.trs-edge{border-top-style:solid;border-color:rgba(37,61,47,.78);box-shadow:0 1px rgba(255,255,255,.9)}.trs-hold{position:absolute;left:clamp(1rem,3vw,2rem);top:40%;transform:translateY(-50%);z-index:4;padding:.32rem .55rem;border:1px solid var(--trs-line);border-radius:999px;background:rgba(255,255,255,.88);color:var(--trs-mut);font-family:var(--font-heading);font-size:.56rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.trs-section.is-approved .trs-hold{color:var(--trs-sage);border-color:rgba(79,122,94,.38)}.trs-gate{min-width:124px;min-height:54px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(54,77,62,.16)}.trs-gate.is-open{background:rgba(237,248,240,.95);box-shadow:0 0 0 5px rgba(79,122,94,.08),0 12px 30px rgba(54,77,62,.12)}.trs-lane__src{background:rgba(255,255,255,.72)!important;border-color:rgba(79,122,94,.24)!important;backdrop-filter:blur(8px);box-shadow:0 10px 24px rgba(64,94,73,.09);color:var(--trs-ink)}.trs-pkt{width:18px;height:22px;border-radius:3px;background:rgba(255,255,255,.9)!important;border:1px solid var(--trs-sage);box-shadow:inset 0 0 0 3px rgba(79,122,94,.08),0 5px 14px rgba(54,77,62,.16)}.trs-section.is-run:not(.is-approved) .trs-lane--ext .trs-pkt{background:rgba(255,255,255,.95)!important;border-color:var(--trs-mut)}.trs-section.is-run.is-approved .trs-lane--ext .trs-pkt{background:rgba(255,247,239,.95)!important;border-color:var(--trs-out)}.trs-audit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:1rem 0 0;padding:0;list-style:none;border:1px solid var(--trs-line);border-radius:10px;overflow:hidden;background:var(--trs-line)}.trs-audit li{position:relative;display:flex;flex-direction:column;gap:.14rem;padding:.7rem .8rem;background:rgba(255,255,255,.78);color:var(--trs-mut)}.trs-audit li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}.trs-audit li.is-done::before{background:rgba(79,122,94,.45)}.trs-audit li.is-now::before{background:var(--trs-sage)}.trs-audit time{font-family:var(--font-heading);font-size:.56rem;font-weight:800;color:var(--trs-sage);font-variant-numeric:tabular-nums}.trs-audit b{font-family:var(--font-heading);font-size:.7rem;color:var(--trs-ink)}.trs-audit span{font-size:.62rem;line-height:1.4}.trs-task{min-height:44px}
@media(max-width:720px){.trs-hold{left:.6rem;max-width:38%;white-space:normal}.trs-gate{min-width:112px}.trs-audit{grid-template-columns:1fr}.trs-audit li{min-height:64px}.trs-lane__src{white-space:normal!important;max-width:78%}}
@media(min-width:861px) and (max-width:1180px){.pg-nav__world{display:none}.pg-nav__switcher{margin-inline:auto}}
@media(prefers-reduced-motion:reduce){.trs-pkt{transition:none}.trs-section.is-run:not(.is-approved) .trs-lane--ext .trs-pkt{bottom:40%}}

/* Final Review: quiet links stay AA on the clinical paper ground. */
.trs-quiet__p,.trs-quiet__a,.trs-quiet__rel{opacity:1;color:#4b574f}
.trs-quiet__p a,.trs-quiet__a a,.trs-quiet__rel a,.trs-quiet__lead a{color:#284e36}