/*
 * Test-Tool im Designsystem: Farben, Schrift, Buttons, Felder und Karten über das alte (auf .dj-app begrenzte) CSS.
 * Die Variablennamen der alten Seite bleiben, weil das Skript sie auch für die Matrix-Grafik nutzt (var(--accent) …).
 */
.dj-app {
  --bg: #373a36; --bg-elevated: #454944; --bg-card: #454944;
  --grey: #535853; --grey-light: #717470;
  --text: #e8e8e8; --text-strong: #ffffff; --text-muted: #b2b5b1;
  --accent: #97d700; --accent-dark: #afed48; --accent-soft: rgba(151, 215, 0, 0.12);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-display: 400; --weight-heading: 400;
  --border: rgba(255, 255, 255, 0.12); --border-soft: rgba(255, 255, 255, 0.06);
  background: var(--bg); color: var(--text); font-family: var(--font);
}
/* Klassen, die im Designsystem anders belegt sind, hier neutralisieren */
.dj-app .hero { display: block; min-height: 0; }
.dj-app .skip-link { position: static; top: auto; left: auto; padding: 0; background: none; color: var(--text-muted); font-weight: 500; border-radius: 0; }
.dj-app .form-card { max-width: none; }

/* Typografie des Designsystems */
.dj-app h1, .dj-app h2, .dj-app h3, .dj-app .mtx-title, .dj-app .refer-h {
  font-family: var(--font-serif); font-weight: 400; letter-spacing: 0; text-transform: none;
}
.dj-app h1.hero-headline { font-size: var(--type-h1-size); line-height: var(--type-h1-lh); color: #fff; }
.dj-app h1.hero-headline em, .dj-app .how .closer em { font-style: normal; color: var(--accent); }
.dj-app section h2 { font-size: var(--type-h2-size); line-height: var(--type-h2-lh); }
.dj-app .step-card h3 { font-size: var(--type-h4-size); line-height: var(--type-h4-lh); }
.dj-app .hero-eyebrow, .dj-app .eyebrow, .dj-app .step-card .step-num, .dj-app .mtx-eyebrow, .dj-app .refer-eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: 14px; line-height: 22px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--accent);
}
.dj-app .hero-tagline { font-weight: 200; font-size: var(--type-lead-size); line-height: var(--type-lead-lh); color: var(--text); }
.dj-app .breadcrumb { font-size: 12px; line-height: 16px; }

/* Buttons wie Button/Primary (Radius 15, 16/28, Label/Button) */
.dj-app .btn-primary, .dj-app .refer-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 28px; border: 0; border-radius: var(--radius-md);
  background: var(--accent); color: #373a36; font: 700 14px/16px var(--font-sans); letter-spacing: 0; text-transform: none; box-shadow: none;
}
.dj-app .btn-primary:hover, .dj-app .refer-btn:hover { background: #afed48; transform: none; }
.dj-app .btn-secondary { border-radius: var(--radius-md); border: 1px solid #fff; color: #fff; font: 600 14px/16px var(--font-sans); padding: 11px 19px; }

/* Felder wie Input/Textarea (bg/inset, border/input, Radius 8, Fokus = 2 px Lime) */
.dj-app input[type="text"], .dj-app input[type="email"], .dj-app textarea, .dj-app .url-row input, .dj-app .cf-field input, .dj-app .cf-field textarea, .dj-app .cf-row input {
  background: #373a36; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 8px; color: #fff; font: 400 16px/24px var(--font-sans);
}
.dj-app input:focus, .dj-app textarea:focus, .dj-app .url-row input:focus, .dj-app .cf-field input:focus, .dj-app .cf-field textarea:focus {
  outline: none; border: 2px solid var(--accent); box-shadow: none;
}
.dj-app .cf-field label { font: 600 12px/16px var(--font-sans); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text); }

/* Karten wie Card (surface, Kontur innen border/subtle, Radius 15) */
.dj-app .form-card, .dj-app .step-card, .dj-app .mtx-card, .dj-app .score-card, .dj-app .result-block, .dj-app .email-block, .dj-app .refer-block {
  background: #454944; border: 0; border-radius: var(--radius-md); outline: 1px solid rgba(255, 255, 255, 0.12); outline-offset: -1px; box-shadow: none;
}
.dj-app .diag-spinner .ring { border-color: rgba(255, 255, 255, 0.12); border-top-color: var(--accent); }