/* ============================================================
   components.css — Buttons, Cards, Stats, Tags, Forms, Marks
   ============================================================ */

/* ── Buttons ──────────────────────────────────────────── */
.btn {
  --_bg: var(--ink);
  --_fg: var(--paper);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1;
  color: var(--_fg);
  background: var(--_bg);
  border-radius: var(--radius-pill);
  isolation: isolate;
  overflow: hidden;
  transform: translate(var(--mx, 0), var(--my, 0));
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              filter var(--dur-fast) var(--ease);
  will-change: transform;
}
.btn::after { /* Wipe-Glanz */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 40%, color-mix(in srgb, #fff 22%, transparent) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease);
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover { box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary { --_bg: var(--clay); --_fg: #fff; }
.btn--primary:hover { --_bg: var(--clay-deep); }
.btn--ink { --_bg: var(--ink); --_fg: var(--paper); }
.btn--ghost {
  --_bg: transparent;
  --_fg: var(--ink);
  border: 1px solid var(--hairline);
}
.btn--ghost:hover { border-color: var(--clay); color: var(--clay); }
.btn--lg { padding: 1.1rem 2rem; font-size: var(--step-1); }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn__icon { width: 1.05em; height: 1.05em; transition: transform var(--dur-fast) var(--ease); }
.btn:hover .btn__icon { transform: translateX(3px); }

/* Text-Link mit Clay-Wipe-Underline */
.link {
  position: relative;
  color: var(--ink);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background-image: linear-gradient(var(--clay), var(--clay));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--dur) var(--ease), color var(--dur-fast) var(--ease);
  padding-bottom: 2px;
}
.link:hover { color: var(--clay); background-size: 100% 1.5px; }

/* ── Eyebrow / Folio ──────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--graphite);
}
.folio { color: var(--clay); font-variant-numeric: tabular-nums; }

/* ── Tags / Badges / Pills ────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.8rem;
  font-size: var(--step--1);
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--graphite);
}
.tag--accent { color: var(--clay); border-color: color-mix(in srgb, var(--clay) 35%, transparent); background: var(--clay-wash); }
.tag--sage   { color: var(--sage-deep); border-color: color-mix(in srgb, var(--sage) 35%, transparent); }
.tag__dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }

/* ── Karte / Well ─────────────────────────────────────── */
.card {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card--raised:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--clay) 30%, var(--hairline)); }
.card__index { font-family: var(--font-mono); font-size: var(--step--1); color: var(--clay); letter-spacing: var(--tracking-mono); }
.card__title { font-size: var(--step-2); margin-top: 0.6rem; }
.card__text { color: var(--graphite); margin-top: 0.7rem; }

/* ── Kompetenz-Säule ──────────────────────────────────── */
.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: 100%;
}
.pillar__icon { width: 2.5rem; height: 2.5rem; color: var(--clay-deep); }
.pillar__icon svg { width: 100%; height: 100%; }
.pillar__num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: var(--tracking-mono); color: var(--graphite-2); }
.pillar__title { font-size: var(--step-2); }
.pillar__benefit { color: var(--graphite); font-size: var(--step-1); max-width: 32ch; }
.pillar__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: var(--space-3); }
.pillar__tags span {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--graphite-2); border: 1px solid var(--hairline); border-radius: var(--radius-pill);
  padding: 0.3rem 0.75rem;
}

/* ── Stat-Plate (kinetische Kennzahlen) ───────────────── */
.stat { display: grid; gap: 0.3rem; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4rem);
  font-weight: 400;
  line-height: 0.95;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat__num .unit { color: var(--clay); }
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
}

/* ── Form-Felder ──────────────────────────────────────── */
.field { display: grid; gap: 0.45rem; }
.field__label { font-weight: 500; font-size: var(--step--1); color: var(--graphite); }
.input, .textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--graphite-2); }
.input:focus, .textarea:focus {
  outline: none;
  border-color: var(--clay);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--clay) 18%, transparent);
}
.checkbox { display: flex; gap: 0.7rem; align-items: flex-start; font-size: var(--step--1); color: var(--graphite); cursor: pointer; }
.checkbox input { margin-top: 0.15rem; width: 1.1rem; height: 1.1rem; accent-color: var(--clay); flex: none; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Honeypot */

/* ── Monogramm-Mark ───────────────────────────────────── */
.mark { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--ink); }
.mark__glyph { height: 3.4rem; width: auto; aspect-ratio: 345 / 480; color: var(--clay-deep); transition: transform var(--dur) var(--ease); }
.mark:hover .mark__glyph { transform: rotate(-4deg) scale(1.05); }
:root[data-theme="evening"] .mark__glyph { color: var(--clay); }
/* Monogramm aus Higgsfield-Artwork: hochauflösende Maske, per currentColor gefärbt */
.mono-mark {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("../logo/logo-mark-tight.png") center / contain no-repeat;
          mask: url("../logo/logo-mark-tight.png") center / contain no-repeat;
}
.mark__word { font-family: var(--font-display); font-size: var(--step-1); font-weight: 460; letter-spacing: -0.01em; }
.mark__word small { display: block; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--graphite-2); font-weight: 500; }

/* ── Margin-Annotation (handschriftliche Notiz) ───────── */
.annote {
  font-size: var(--step-0);
  color: var(--graphite);
  line-height: var(--leading-snug);
  padding-left: 1.1rem;
  border-left: 2px solid var(--clay);
}

/* ── Prosa (Rechtsseiten) ─────────────────────────────── */
.prose { max-width: 52rem; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--step-2); margin-top: var(--space-12); }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-8); font-family: var(--font-body); font-weight: 600; }
.prose p, .prose li, .prose address { color: var(--graphite); }
.prose ul { padding-left: 1.3rem; list-style: disc; }
.prose li { margin-top: 0.35rem; }
.prose a { color: var(--clay); text-decoration: underline; text-underline-offset: 3px; }
.prose address { font-style: normal; }
.prose strong { color: var(--ink); }
.todo {
  background: var(--clay-wash); color: var(--clay-deep);
  padding: 0.05em 0.4em; border-radius: 4px; font-weight: 600;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.legal-head { padding-block: var(--space-10) var(--space-8); }
.legal-head h1 { font-size: var(--step-4); }
.legal-back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--graphite); margin-bottom: var(--space-6); }
.legal-back:hover { color: var(--clay); }
.legal-note { padding: var(--space-5); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); font-size: var(--step--1); color: var(--graphite); margin-top: var(--space-12); }

/* ── Reveal-Basis (greift mit reveal.js) ──────────────── */
.reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
/* Stärkerer „Aufstieg" für Überschriften & Hero */
.reveal--rise { transform: translateY(58px) scale(0.985); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--rise { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ── Scroll-Fortschrittsbalken ────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--clay), var(--clay-deep));
  z-index: 300; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }