/* ============================================================
   Service 01 · Übersetzen — page-local LAYOUT only.
   Signature: a two-column "translation table" (said ↔ meant).
   Accent: magenta (brand). All colors/space/type are tokens.
   ============================================================ */

.svc--translate { --accent: var(--magenta-500); }
.ut-accent { color: var(--accent); }
.ut-accent.kb-eyebrow::before { background: var(--accent); }

/* ---- Hero -------------------------------------------------- */
.ut-hero { padding-bottom: var(--space-9); }
.ut-hero__grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: var(--space-9); align-items: center; }
.ut-hero__h1 { font: var(--type-display); font-size: clamp(2.4rem, 5.2vw, 4rem); letter-spacing: var(--tracking-tight); color: var(--ink); margin-top: var(--space-4); }
.ut-hero__sub { font: var(--type-body-lg); color: var(--text-body); max-width: 50ch; margin-top: var(--space-5); }

/* big square index mark, echoing the Kachel */
.ut-mark { display: grid; place-content: center; gap: var(--space-3); aspect-ratio: 1; background: var(--accent); color: var(--text-on-brand); padding: var(--space-6); box-shadow: var(--shadow-md); }
.ut-mark__num { font: var(--type-mono); font-size: var(--text-2xl); font-weight: var(--fw-bold); }
.ut-mark__word { writing-mode: vertical-rl; transform: rotate(180deg); font: var(--type-h2); justify-self: center; }

/* ---- Signature translation table --------------------------- */
.ut-map { background: var(--surface-sunken); }
.ut-map__h2 { margin: var(--space-3) 0 var(--space-7); max-width: 22ch; }
.ut-table { border: var(--bw) dashed var(--border-dash); background: var(--surface-card); box-shadow: var(--shadow-md); }
.ut-table__head { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); padding: var(--space-4) var(--space-6); border-bottom: var(--bw) dashed var(--border-dash); }
.ut-table__head span { font: var(--type-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-muted); }
.ut-table__head span:last-child { color: var(--accent); }

.ut-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-6); }
.ut-row + .ut-row { border-top: var(--bw) dashed var(--border-dash); }
.ut-row:hover { background: var(--brand-soft); }
.ut-row__said { font: var(--type-body-lg); color: var(--text-muted); font-style: italic; }
.ut-row__meant { font: var(--type-body); color: var(--text-strong); font-weight: var(--fw-medium); }
.ut-row__arrow { font: var(--type-h4); color: var(--accent); }

/* ---- Outcomes ---------------------------------------------- */
.ut-out__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

/* ---- CTA band ---------------------------------------------- */
.ut-cta { background: var(--accent); color: var(--text-on-brand); }
.ut-cta__quote { font: var(--type-h4); font-style: italic; color: rgba(255,255,255,.85); max-width: 30ch; }
.ut-cta__h2 { font: var(--type-h1); color: var(--gray-0); max-width: 20ch; margin-top: var(--space-4); }

@media (max-width: 900px) {
  .ut-hero__grid { grid-template-columns: 1fr; }
  .ut-mark { aspect-ratio: auto; grid-auto-flow: column; justify-content: start; align-items: center; }
  .ut-mark__word { writing-mode: horizontal-tb; transform: none; }
  .ut-table__head { grid-template-columns: 1fr; gap: var(--space-2); }
  .ut-table__head span:last-child { display: none; }
  .ut-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .ut-row__arrow { transform: rotate(90deg); justify-self: start; }
  .ut-out__grid { grid-template-columns: 1fr; }
}