/* =====================================================================
   Application variants (briefing 01.10.2026): Silver Atena and CONTACT Software.
   Loaded only by the variant pages, after the unchanged site.css. Same layout,
   type and interactions; only light brand accents and the honest requirement
   states. Brand colours read from the official CSS on 01.10.2026
   (docs/varianten/RESEARCH.md §4); shades marked "derived" were darkened or
   lightened from them so text keeps WCAG AA contrast.
   ===================================================================== */

/* ---------- Silver Atena: petrol, orange accent, blue, green ---------- */
.variant--sa {
  --night: #002a3a;          /* .bg-darkgreen */
  --navy: #003844;           /* --colors-primary-400 (header, footer) */
  --indigo: #0071ae;         /* derived from CTA blue #0082ca (white text ≥ 5:1) */
  --indigo-ink: #00618f;     /* derived, text on white ≥ 6.7:1 */
  --indigo-tint: #e1f0f7;
  --lavender: #9fd3c1;       /* derived from highlight green #5ab784 / mint #d1e8e3 */
  --lavender-2: #cde6df;     /* mint, small text on petrol */
  --on-dark: #e6f0ee;
  --on-dark-muted: #b3c9c5;
  --rose: #ff5f00;           /* --colors-secondary-400, decorative only */
  --human-fg: #00618f; --human-bg: #e1f0f7;
  --glow: radial-gradient(55% 60% at 10% 25%, rgba(0, 130, 202, 0.4), transparent 70%),
    radial-gradient(45% 55% at 90% 80%, rgba(255, 95, 0, 0.22), transparent 70%);
  --brand-accent: #ff5f00;   /* rotating word, nav underline, rail marker */
  --seg-ok: #5ab784;         /* --colors-primary-200 (indicator) */
  --seg-transfer: #0082ca;   /* --colors-blue-300 */
  --glow-rgb: 0, 130, 202;
  --glow2-rgb: 255, 95, 0;
}

/* ---------- CONTACT Software: navy, blue, turquoise ---------- */
.variant--cs {
  --night: #00243d;          /* derived from navy #003254 */
  --navy: #003254;           /* logo, navigation, footer */
  --indigo: #0074b3;         /* derived from primary blue #0080c5 (white text ≥ 5:1) */
  --indigo-ink: #005e9e;     /* headline blue of the job ad */
  --indigo-tint: #e3f1f9;
  --lavender: #a6d8f2;       /* derived light blue */
  --lavender-2: #cde8f6;
  --on-dark: #e7f1f8;
  --on-dark-muted: #b4c8d6;
  --rose: #28bdd6;           /* turquoise, CTA buttons and links */
  --human-fg: #005e9e; --human-bg: #e3f1f9;
  --glow: radial-gradient(55% 60% at 10% 25%, rgba(0, 128, 197, 0.42), transparent 70%),
    radial-gradient(45% 55% at 90% 80%, rgba(40, 189, 214, 0.24), transparent 70%);
  --brand-accent: #28bdd6;
  --seg-ok: #92c108;         /* theme green */
  --seg-transfer: #28bdd6;
  --glow-rgb: 0, 128, 197;
  --glow2-rgb: 40, 189, 214;
}

/* ---------- Accents: glows and tints that site.css writes as fixed colours ---------- */
.variant .hero__rot { color: var(--brand-accent); }
.variant .nav__links a:hover, .variant .nav__links a[aria-current] { box-shadow: inset 0 -2px 0 var(--brand-accent); }
.variant .sec--dark::before { background: radial-gradient(50% 60% at 50% 110%, rgba(var(--glow-rgb), 0.45), transparent 70%), radial-gradient(35% 45% at 95% 0%, rgba(var(--glow2-rgb), 0.2), transparent 70%); }
.variant .card--dark::before { background: radial-gradient(60% 70% at 100% 100%, rgba(var(--glow2-rgb), 0.26), transparent 70%), radial-gradient(50% 60% at 0% 0%, rgba(var(--glow-rgb), 0.35), transparent 70%); }
.variant .quote__offer::before { background: radial-gradient(70% 60% at 100% 0%, rgba(var(--glow-rgb), 0.35), transparent 70%); }
.variant .cv-top::before { background: radial-gradient(45% 90% at 8% 10%, rgba(var(--glow-rgb), 0.5), transparent 70%), radial-gradient(40% 80% at 98% 100%, rgba(var(--glow2-rgb), 0.3), transparent 70%); }
.variant .cv-kpis__l { color: var(--lavender-2); }
.variant .proposal { border-color: rgba(var(--glow-rgb), 0.5); }
.variant .proposal__badge { border-color: rgba(var(--glow-rgb), 0.45); }

/* Rail marker: a neutral pin instead of the parcel of the original page */
.variant .rail__pkg { top: -26px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--brand-accent); }
.variant .rail__pkg::before { bottom: -4px; border-top-color: var(--brand-accent); }
.variant .rail__pkg::after { display: none; }

/* ---------- Honest requirement states (briefing §6) ---------- */
.chip--transfer { background: #e3f0f9; color: #1d4e7e; }
.chip--learn { background: var(--warn-bg); color: var(--warn-fg); }
.chip--due { background: var(--paper); color: var(--neutral-fg); box-shadow: inset 0 0 0 1px #9aa0b4; }
.quote__row.is-pending .chip--transfer, .quote__row.is-pending .chip--learn, .quote__row.is-pending .chip--due { display: none; }

/* Any number of positions in one row (the original has six) */
.variant .quote__segs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
.variant .quote__seg.is-ok { background: var(--seg-ok); }
.variant .quote__seg.is-partial[data-st='transfer'] { background: var(--seg-transfer); }
.variant .quote__seg.is-partial[data-st='learn'] { background: var(--amber); }
.variant .quote__seg.is-partial[data-st='due'] { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }

/* The count line is fixed text; it appears once every row has been checked */
.variant .quote__sub { transition: opacity 0.4s var(--ease); }
.variant .quote:has(.quote__row.is-pending) .quote__sub { opacity: 0; }

/* ---------- Cover letter (private build → one-page PDF) ---------- */
.letter .cv-top { padding: 12mm 18mm 8mm; }
.letter__contact { margin-top: 3mm; font-size: 0.8125rem; color: var(--lavender-2); }
.letter__contact a { color: inherit; text-decoration: none; }
.letter__body { padding: 12mm 18mm 14mm; font-size: 1.0625rem; line-height: 1.55; }
.letter__body > * + * { margin-top: 3.4mm; }
.letter__date { text-align: right; color: var(--muted); }
.letter__subject { margin-top: 7mm !important; font-size: 1.0625rem; font-weight: 500; line-height: 1.45; }
.letter__link a { font-weight: 500; color: var(--indigo-ink); }
.letter__close { margin-top: 6mm !important; }
.letter__sign { margin-top: 1mm !important; }

@media print {
  .js .quote__row.is-pending .chip--transfer, .js .quote__row.is-pending .chip--learn, .js .quote__row.is-pending .chip--due { display: inline-flex; }
  .variant .quote__sub { opacity: 1 !important; }
}