/* ============================================================
   SetSign — Formular zum Unterschreiben
   Regeln: docs/DESIGN-REGELN.md · Sprache: Stimme B
   Keine Schatten, keine Verläufe, nur Palettenfarben.
   ============================================================ */

/*
   Die Marke des Mandanten kommt vom Server als fertige Palette und wird von
   sign.js auf :root gesetzt. Hier stehen die Rückfallwerte: Ohne Brand-Kit ist
   die Marke Cinnabar, also genau das, was vorher da war.

   Nur der Akzent wird gefärbt, nie Grund oder Text. Ein Formular ist ein
   Dokument, kein Auftritt — die Fläche, auf der ein Rechtstext steht, bleibt
   das kontraststärkste Paar, das die CI hat.
*/
:root {
  --brand-akzent: var(--cinnabar);
  --brand-auf-akzent: var(--gallery);
  --brand-akzent-hover: var(--cinnabar-hover);
  --brand-akzent-zart: var(--cinnabar-tint);
  --font-marke: var(--font-sans);
}

/* Die Markenschrift nur, wenn sie auf dem Gerät liegt — geladen wird nichts. */
.hat-markenschrift body { font-family: var(--font-marke), var(--font-sans); }

html, body {
  min-height: 100%;
  background: var(--gallery);
  color: var(--woodsmoke);
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

::selection { background: var(--brand-akzent); color: var(--brand-auf-akzent); }

/* ---------- Fortschritt ---------- */

.progress {
  position: sticky;
  top: 0;
  z-index: 5;
  height: 3px;
  background: var(--ink-10);
}

.progress-bar {
  height: 100%;
  width: 0;
  background: var(--brand-akzent);
  transition: width var(--dur-base) var(--ease-out);
}

/* ---------- Kopf ---------- */

.head {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--gutter-lg) var(--sp-3);
  border-bottom: var(--border-w) solid var(--border-subtle);
}

/* Marke und Wortmarke stehen zusammen — das eine erklaert das andere. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  /* 34 px, nicht 30: Darunter verschmelzen die Sucherwinkel zu roten Punkten. */
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: block;
}

/*
   Klein geschrieben, und das ist keine Nachlaessigkeit: Der Sprachfuehrer sagt
   „SetSign" im Fliesstext mit grossem S in der Mitte — „nie durchgehend klein
   ausser im Logo". Hier ist das Logo.
*/
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-headline);
}

.doc-title {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

/* Das Logo des Studios, wenn eines hinterlegt ist. Höhe begrenzt, Breite
   frei — ein Wortmarken-Logo ist breit, ein Signet quadratisch, und beide
   sollen den Kopf nicht sprengen. */
.marken-logo {
  height: 26px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  align-self: center;
  margin-right: var(--sp-2);
}

/* ---------- Bühne ---------- */

.stage {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(24px, 6vh, 64px) var(--gutter-lg);
}

.screen {
  width: 100%;
  max-width: 640px;
  animation: step-in var(--dur-slow) var(--ease-out) both;
}

@keyframes step-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.screen h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: var(--tracking-headline);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

.screen p,
.clause p {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  margin: 0 0 var(--sp-4);
  max-width: 60ch;
}

.lede { color: var(--fg-muted); }

/* Kontextsatz vor einer heiklen Frage — erst der Grund, dann die Frage. */
.context {
  border-left: var(--border-w-3) solid var(--brand-akzent);
  padding-left: var(--sp-4);
  color: var(--fg-muted);
  font-size: var(--fs-base);
}

.clause {
  max-height: 46vh;
  overflow-y: auto;
  padding-right: var(--sp-4);
}

.clause strong { font-weight: var(--weight-bold); }
.clause .verbot {
  display: inline-block;
  font-weight: var(--weight-bold);
  border-bottom: var(--border-w-3) solid var(--woodsmoke);
  margin-bottom: var(--sp-2);
}

/* ---------- Eingaben ---------- */

label.field { display: block; margin-bottom: var(--sp-4); }

.field-label {
  display: block;
  font-weight: var(--weight-bold);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-2);
}

.field-help {
  display: block;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-bottom: var(--sp-2);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"] {
  width: 100%;
  padding: 13px var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-copy);
  color: var(--woodsmoke);
  background: var(--white);
  border: var(--border-w-2) solid var(--ink-30);
  border-radius: var(--r-1);
}

input:focus-visible {
  outline: none;
  border-color: var(--woodsmoke);
  box-shadow: var(--elev-hair);
}

/* Auswahl und Bestätigung als große Klickflächen — am Set mit dem Finger. */
.option {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-2);
  background: var(--white);
  border: var(--border-w-2) solid var(--ink-30);
  border-radius: var(--r-1);
  cursor: pointer;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  transition: border-color var(--dur-fast) var(--ease-out);
}

.option:hover { border-color: var(--ink-50); }
.option:has(input:checked) { border-color: var(--woodsmoke); border-width: var(--border-w-3); }

.option input { margin-top: 3px; flex-shrink: 0; accent-color: var(--brand-akzent); width: 18px; height: 18px; }

.hint-key {
  display: inline-block;
  min-width: 20px;
  padding: 1px 5px;
  margin-right: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  text-align: center;
  color: var(--fg-muted);
  border: var(--border-w) solid var(--ink-30);
  border-radius: var(--r-1);
}

/* ---------- Unterschrift ---------- */

.pad-wrap {
  position: relative;
  background: var(--white);
  border: var(--border-w-2) solid var(--ink-30);
  border-radius: var(--r-1);
  overflow: hidden;
}

.pad {
  display: block;
  width: 100%;
  height: 220px;
  touch-action: none;
  cursor: crosshair;
}

.pad-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--fg-subtle);
  font-size: var(--fs-sm);
  pointer-events: none;
}

.pad-wrap.drawn .pad-hint { display: none; }

.pad-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--sp-2);
}

/* ---------- Knöpfe ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 13px var(--sp-5);
  border: var(--border-w-2) solid transparent;
  border-radius: var(--r-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.btn-primary { background: var(--brand-akzent); border-color: var(--brand-akzent); color: var(--brand-auf-akzent); }
.btn-primary:hover { background: var(--brand-akzent-hover); border-color: var(--brand-akzent-hover); }
.btn-primary:disabled { background: var(--ink-30); border-color: var(--ink-30); cursor: not-allowed; }

.btn-tertiary { background: transparent; border-color: var(--woodsmoke); color: var(--woodsmoke); }
.btn-tertiary:hover { background: var(--woodsmoke); color: var(--gallery); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-muted); padding-left: 0; }
.btn-ghost:hover { color: var(--woodsmoke); }
.btn-ghost[hidden] { display: none; }

/* ---------- Fuß ---------- */

.foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--gutter-lg) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  border-top: var(--border-w) solid var(--border-subtle);
  background: var(--gallery);
}

.foot[hidden] { display: none; }

.step-count {
  font-size: var(--fs-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
}

/* ---------- Meldungen ---------- */

.issue {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-left: var(--border-w-3) solid var(--brand-akzent);
  background: var(--brand-akzent-zart);
  font-size: var(--fs-sm);
  font-weight: var(--weight-medium);
}

.issue[hidden] { display: none; }

/* ---------- Abschluss ---------- */

.done h2 { margin-bottom: var(--sp-4); }

.done-note {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  margin-top: var(--sp-5);
}

.hash {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  word-break: break-all;
}

/* ---------- Abbruch — der schwerste Text im Produkt ---------- */

.declined h2 { margin-bottom: var(--sp-4); }

@media (max-width: 720px) {
  .head, .stage, .foot { padding-left: var(--gutter); padding-right: var(--gutter); }
  .pad { height: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}