/* seosath — Impressum generator tool styles.
 *
 * Uses the global design tokens (--bg, --bg-card, --border, --accent, --text*)
 * defined in main.css. Component selectors are namespaced under .impressum-tool /
 * .impressum-result so this file can be loaded only on the tool page without
 * any risk of leaking into other pages.
 *
 * Status colours are intentionally restrained — green is a small dot, yellow
 * a single warm accent, red the existing accent (already orange-red). No
 * panic gradients, no glow.
 */

.impressum-tool {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: clamp(20px, 4vw, 40px);
}

/* ── Step indicator ──────────────────────────────────────────────────────── */
.impressum-tool__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  font-size: var(--fs-12, 12px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-3);
}
.impressum-tool__step {
  display: inline-flex;
  opacity: 0.55;
  transition: opacity 0.18s ease, color 0.18s ease;
}
.impressum-tool__step.is-active { opacity: 1; color: var(--text); }
.impressum-tool__step.is-done   { opacity: 0.85; color: var(--text-2); }

/* Button reset — keeps the visual identical to the previous span layout
   while making the whole step a real, focusable button. Disabled state
   is set by JS for steps that aren't reachable (future steps, current
   step, locked result step). */
.impressum-tool__step-jump {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 14px;
  transition: color 0.18s ease, background 0.18s ease;
}
.impressum-tool__step-jump:disabled {
  cursor: not-allowed;
}
.impressum-tool__step.is-reachable .impressum-tool__step-jump:hover,
.impressum-tool__step.is-reachable .impressum-tool__step-jump:focus-visible {
  color: var(--text);
  outline: none;
}
.impressum-tool__step.is-reachable .impressum-tool__step-jump:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-ring, rgba(232,93,47,0.3));
}

.impressum-tool__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font-family: var(--mono, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.impressum-tool__step.is-active .impressum-tool__step-num {
  border-color: var(--accent);
  color: var(--text);
}
.impressum-tool__step.is-done .impressum-tool__step-num {
  border-color: var(--border-strong);
  background: var(--accent-soft);
  color: var(--text);
}
.impressum-tool__step.is-reachable .impressum-tool__step-jump:hover .impressum-tool__step-num {
  border-color: var(--accent);
}

/* ── Privacy note (sits between step indicator and form) ─────────────────── */
.impressum-tool__privacy {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-left: 2px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 6px 6px 0;
  color: var(--text-2);
  font-size: var(--fs-13, 13px);
  line-height: 1.55;
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.impressum-tool__form { margin: 0; }
.impressum-tool__fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: none;
}
.impressum-tool__fieldset.is-active { display: block; }

.impressum-tool__legend {
  display: block;
  font-size: var(--fs-18, 18px);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  letter-spacing: var(--tracking-tight, -0.01em);
}

.impressum-tool__hint {
  color: var(--text-2);
  font-size: var(--fs-14, 14px);
  margin: 6px 0 12px;
}

/* Chrome / Edge / Safari paint autofilled inputs with a hardcoded pale-yellow
   or pale-blue background that overrides any background colour. The official
   workaround: paint a giant inset box-shadow in the brand background colour,
   then use -webkit-text-fill-color to keep the text readable. The 5000s
   transition delays Chrome's re-application of its background long enough
   that the shadow effectively wins forever. */
.impressum-tool input:-webkit-autofill,
.impressum-tool input:-webkit-autofill:hover,
.impressum-tool input:-webkit-autofill:focus,
.impressum-tool input:-webkit-autofill:active,
.impressum-tool textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset;
  caret-color: var(--text);
  transition: background-color 5000s ease-in-out 0s;
}

/* ── Choice cards (radio groups for purpose/audience) ────────────────────── */
.impressum-tool__choices {
  display: grid;
  gap: 10px;
}
.impressum-tool__choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  background: var(--bg-1);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.impressum-tool__choice:hover { border-color: var(--border-hover); }
.impressum-tool__choice input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--accent);
}
.impressum-tool__choice input[type="radio"]:checked + .impressum-tool__choice-body,
.impressum-tool__choice:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.impressum-tool__choice-body { display: flex; flex-direction: column; gap: 4px; }
.impressum-tool__choice-label { color: var(--text); font-weight: 500; font-size: var(--fs-15, 15px); }
.impressum-tool__choice-hint  { color: var(--text-2); font-size: var(--fs-14, 14px); }
.impressum-tool__choice--inline { padding: 10px 14px; }
.impressum-tool__choice--inline .impressum-tool__choice-label { font-size: var(--fs-14, 14px); }

/* ── Conditional fields ──────────────────────────────────────────────────── */
.impressum-tool__conditional {
  margin-top: 16px;
  padding: 16px 18px;
  border-left: 2px solid var(--accent);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 8px 8px 0;
}

/* ── Nav buttons ─────────────────────────────────────────────────────────── */
.impressum-tool__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.impressum-tool__nav .btn:only-child { margin-left: auto; }

.impressum-tool__error {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--text);
  font-size: var(--fs-14, 14px);
}

/* ── Result panel ────────────────────────────────────────────────────────── */
.impressum-result__head {
  padding: 24px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-1);
  margin-bottom: 24px;
}
.impressum-result__head--green  { border-left: 3px solid #4caf78; }
.impressum-result__head--yellow { border-left: 3px solid #d4a23a; }
.impressum-result__head--red    { border-left: 3px solid var(--accent); }

.impressum-result__status {
  display: inline-block;
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 8px;
}
.impressum-result__head--green  .impressum-result__status { color: #4caf78; }
.impressum-result__head--yellow .impressum-result__status { color: #d4a23a; }
.impressum-result__head--red    .impressum-result__status { color: var(--accent); }

.impressum-result__headline {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 600;
  letter-spacing: var(--tracking-tight, -0.01em);
  color: var(--text);
  margin: 4px 0 8px;
}
.impressum-result__body {
  color: var(--text-2);
  font-size: var(--fs-15, 15px);
  margin: 0;
}

.impressum-preview {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-2);
  margin-bottom: 24px;
  overflow: hidden;
}
.impressum-preview__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}
.impressum-preview__title {
  margin: 0;
  font-size: var(--fs-14, 14px);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.impressum-preview__body {
  margin: 0;
  padding: 22px 24px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  background: transparent;
}
.impressum-preview--blocked {
  padding: 24px;
  color: var(--text-2);
  text-align: center;
  font-style: italic;
}

/* ── Findings list ──────────────────────────────────────────────────────── */
.impressum-result__findings { margin-bottom: 28px; }
.impressum-findings {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.impressum-finding {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-1);
}
.impressum-finding__dot {
  flex: 0 0 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-top: 7px;
}
.impressum-finding--red .impressum-finding__dot    { background: var(--accent); }
.impressum-finding--yellow .impressum-finding__dot { background: #d4a23a; }
.impressum-finding--green .impressum-finding__dot  { background: #4caf78; }
.impressum-finding__text {
  color: var(--text-2);
  font-size: var(--fs-14, 14px);
  line-height: 1.55;
}

.impressum-result__cta {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--bg-1);
  padding: 24px 28px;
}

/* "Nicht Teil des Impressums" — sits directly beneath the preview <pre>.
   Visually distinct from the preview body so users understand it is meta-
   commentary about the tool, not part of the legal text they would publish. */
.impressum-meta-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0 24px;
  padding: 12px 16px;
  border-left: 2px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 6px 6px 0;
  font-size: var(--fs-13, 13px);
  color: var(--text-2);
  line-height: 1.55;
}
.impressum-meta-note__label {
  font-family: var(--mono, monospace);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

/* Tool-level non-lawyer disclaimer at the bottom of the page. Subtle,
   not panicky, but visible and not hidden in fine print. */
.impressum-tool__non-lawyer {
  margin: 0;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-1);
  color: var(--text-2);
  font-size: var(--fs-13, 13px);
  line-height: 1.6;
  text-align: center;
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.impressum-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}
.impressum-modal__inner {
  max-width: 520px;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
}
.impressum-modal[hidden] { display: none; }