/* LFB GmbH – E-Mail-Registrierung für E-Rechnungen
   Umsetzung von Claude Design „LFB-Registrierung“ (Design-System „Industry“, Variante „Brief“, LFB-Blau #48669F) */

/* — Schriften (selbst gehostet, keine Google-Verbindung) — */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-600.woff2) format("woff2"); }

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);
  --color-error: oklch(0.5 0.16 28);

  --color-neutral-100: #f5f5f8;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;

  /* LFB-Blau */
  --color-accent: #48669F;
  --color-accent-100: oklch(0.97 0.012 264);
  --color-accent-300: oklch(0.86 0.045 264);
  --color-accent-600: oklch(0.45 0.095 264);
  --color-accent-700: oklch(0.4 0.09 264);
  --color-accent-800: oklch(0.33 0.075 264);
  --color-accent-900: oklch(0.25 0.055 264);

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
}

/* — Basis — */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--color-surface); color: var(--color-text);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55; font-weight: 400;
}
h1 {
  font-family: var(--font-heading); font-weight: 600;
  line-height: 1.12; letter-spacing: -0.015em; margin: 0;
}
p { margin: 0; }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
input::placeholder { color: var(--color-neutral-400); letter-spacing: 0.04em; }

/* — Buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; text-align: center;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px; line-height: 1.2;
  color: var(--color-text); background: transparent;
  border: 1px solid var(--color-divider); border-radius: 0;
  padding: 6.8px 12.24px;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); border-color: transparent; padding-inline: 3.4px; font-family: var(--font-body); font-weight: 500; }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-main { width: 100%; min-height: 46px; font-size: 16px; letter-spacing: 0.02em; }

/* — Formularfelder — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 44px; padding: 6px 10px; font: inherit; font-size: 15px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: 0;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.input.has-error, .input.has-error:hover { border-color: var(--color-error); }
.err { font-size: 13px; line-height: 1.45; color: var(--color-error); }
.field .err { margin-top: 5px; }

/* — Seitenrahmen — */
.page {
  min-height: 100vh; container-type: inline-size;
  display: flex; flex-direction: column;
  background: var(--color-surface);
}
.head {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 16px clamp(12px, 4cqi, 40px);
  background: var(--color-bg); border-bottom: 1px solid var(--color-divider);
}
.head img { display: block; height: 28px; width: auto; }
.main {
  flex: 1; display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(20px, 6cqi, 64px) clamp(8px, 2.5cqi, 16px) 32px;
}
.wrap { width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 20px; }
.foot {
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  padding: 16px clamp(16px, 4vw, 40px); font-size: 12px;
  background: var(--color-bg); color: var(--color-neutral-700);
  border-top: 1px solid var(--color-divider);
}
.foot nav { display: flex; gap: 20px; }
.foot a { color: inherit; }

/* — Schrittleiste — */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--color-divider);
}
.steps li {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  color: var(--color-neutral-600);
}
.steps li + li { border-left: 1px solid var(--color-divider); }
.steps li.is-done { color: var(--color-text); }
.steps li.is-active { background: var(--color-accent); color: var(--color-bg); }
.steps .num { font-family: var(--font-heading); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.steps .lbl { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* — Karte — */
.card {
  background: var(--color-neutral-100);
  border-top: 4px solid var(--color-accent);
  box-shadow: var(--shadow-md);
  padding: clamp(16px, 5cqi, 36px);
}
.stack { display: flex; flex-direction: column; gap: 22px; }
.stack-20 { gap: 20px; }
.stack-14 { display: flex; flex-direction: column; gap: 14px; }
.stack-12 { display: flex; flex-direction: column; gap: 12px; }
.stack-10 { display: flex; flex-direction: column; gap: 10px; }
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
.kicker { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent-700); }
.lead { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); text-wrap: pretty; }
.note { font-size: 13px; line-height: 1.55; color: var(--color-neutral-700); }
.small { font-size: 12px; color: var(--color-neutral-600); }

.intro .kicker { margin-bottom: 6px; }
.intro h1 { margin: 0 0 10px; font-size: clamp(30px, 6vw, 38px); text-wrap: balance; }
.cust {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 18px; border-bottom: 1px solid var(--color-divider);
}
.cust h1 { font-size: clamp(28px, 5.6vw, 36px); }
.cust .meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--color-neutral-700); }

/* — Code-Eingabe — */
.code-label { font-size: 12px; color: var(--color-neutral-700); }
.code-row { display: flex; align-items: center; gap: clamp(3px, 1.4cqi, 6px); container-type: inline-size; }
.code-row .dash { flex: none; width: clamp(4px, 1.6cqi, 8px); height: 1px; background: var(--color-neutral-500); }
.code-in {
  flex: 1; min-width: 0; height: 56px; padding: 0 2px;
  text-align: center; font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(16px, 6.4cqi, 26px); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text); background: transparent;
  border: 0; border-bottom: 2px solid var(--color-text); border-radius: 0; outline: none;
}
.code-in:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.code-row.has-error .code-in { border-bottom-color: var(--color-error); }

/* — Checkboxen — */
.check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 15px; line-height: 1.45; }
.check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--color-accent); }
.check > span { display: flex; flex-direction: column; gap: 2px; }
.req { color: var(--color-neutral-600); }
/* abweichende Korrespondenz-Adresse nur zeigen, wenn „ebenfalls zur Geschäftskorrespondenz“ abgewählt ist */
.alt-mail { margin: 2px 0 6px 30px; }
.check:has(input[name="cb2"]:checked) + .alt-mail { display: none; }

/* — Bereits registriert — */
.mail-box {
  padding: 14px 16px; background: var(--color-accent-100); border: 1px solid var(--color-accent-300);
  font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: 0.02em;
  color: var(--color-accent-900); overflow-wrap: anywhere;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions .btn { flex: 1 1 180px; min-height: 44px; font-size: 15px; }

/* — Fertig — */
.done-icon { width: 52px; height: 52px; display: grid; place-items: center; background: var(--color-accent); color: var(--color-bg); }
.done-title { margin: 0 0 8px !important; font-size: clamp(30px, 6vw, 40px); }
.summary { display: flex; flex-direction: column; border: 1px solid var(--color-divider); }
.summary .addr {
  padding: 12px 16px; font-family: var(--font-heading); font-weight: 600; font-size: 20px;
  letter-spacing: 0.02em; overflow-wrap: anywhere; border-bottom: 1px solid var(--color-divider);
}
.summary .cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); font-size: 13px; color: var(--color-neutral-700); }
.summary .cols > div { padding: 10px 16px; }
.summary .cols > div + div { border-left: 1px solid var(--color-divider); }
.summary .cols span { color: var(--color-text); font-weight: 500; }