:root {
  --motion-fast: 160ms;
  --motion-content: 300ms;
  --motion-step: 260ms;
  --motion-select: 220ms;
  --motion-ease: cubic-bezier(.2,.7,.2,1);
  --ink: #e8e8e8;
  --muted: #888;
  --line: #2a2a2a;
  --paper: #141414;
  --panel: #1c1c1c;
  --brand: #26333e;
  --brand-dark: #111;
  --accent: #f87171;
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    linear-gradient(90deg, rgba(21, 21, 21, 0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(21, 21, 21, 0.030) 1px, transparent 1px),
    var(--paper);
  background-size: 44px 44px;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 34px;
  padding: 28px 22px;
  color: var(--ink);
  background: var(--panel);
  border-right: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-mark {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: var(--brand-dark);
  font-weight: 800;
  background: var(--brand);
  border-radius: 8px;
}

.brand h1,
.brand p,
.topbar h2,
.topbar p {
  margin: 0;
}

.brand h1 {
  font-size: 20px;
}

.brand p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.steps {
  display: grid;
  gap: 8px;
}

.step {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 10px;
  color: var(--muted);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
}

.step span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.step.is-active {
  color: var(--ink);
  background: #2a2510;
  border-color: var(--brand);
}

.step.is-active span {
  background: var(--brand);
  border-color: var(--brand);
}

.workspace {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
}

.topbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 34px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(28, 28, 28, 0.92);
  backdrop-filter: blur(14px);
}

.eyebrow {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.topbar h2 {
  margin-top: 4px;
  font-size: 30px;
  line-height: 1.1;
}

.quick-fields,
.model-form {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(110px, 140px);
  gap: 12px;
}

.model-form {
  grid-template-columns: minmax(240px, 520px) minmax(150px, 190px);
  max-width: 780px;
  margin-bottom: 18px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

input,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}

textarea {
  resize: vertical;
  line-height: 1.45;
}

input:focus,
textarea:focus {
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(77, 98, 113, 0.18);
}

.check-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  max-width: 780px;
  margin: -4px 0 16px;
  padding: 14px 16px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.check-option input {
  width: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  accent-color: var(--brand-dark);
}

.check-option span {
  display: grid;
  gap: 4px;
}

.check-option strong {
  font-size: 14px;
}

.check-option small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.check-option.inline {
  margin: 0 0 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.screen {
  padding: 30px 34px 36px;
  overflow: auto;
}

.manufacturer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}

.manufacturer,
.select-card,
.segment {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.manufacturer {
  min-height: 72px;
  padding: 18px 22px;
  color: var(--ink);
  text-align: left;
  font-weight: 750;
  font-size: 16px;
}

@media (max-width: 520px) {
  .manufacturer {
    min-height: 54px;
    padding: 12px 14px;
    font-size: 14px;
  }
}

.manufacturer.is-selected,
.select-card.is-selected,
.segment.is-selected {
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(77, 98, 113, 0.18), var(--shadow);
}

.segment-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 220px));
  gap: 10px;
}

.segment {
  min-height: 50px;
  padding: 12px 16px;
  color: var(--ink);
  text-align: center;
  font-weight: 850;
}

.segment.is-selected {
  background: #2a2510;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 14px;
}

.card-grid.compact {
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.select-card {
  position: relative;
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 14px;
  min-height: 150px;
  padding: 20px;
  text-align: left;
}

.check {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  color: #fff;
  background: #444;
  border-radius: 6px;
  font-weight: 800;
  font-size: 13px;
}

.is-selected .check {
  background: var(--brand-dark);
}

.card-copy {
  display: grid;
  gap: 8px;
}

.brand-line {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
}

.brand-logo {
  display: inline-grid;
  min-width: 110px;
  min-height: 40px;
  place-items: center;
  padding: 6px 14px;
  color: #fff;
  background: #242424;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .3px;
}

.brand-logo span {
  display: block;
  transform: translateY(0);
}

.brand-wossner,
.brand-woessner {
  font-style: italic;
  letter-spacing: -.4px;
}

.brand-vertex {
  letter-spacing: .8px;
}

.brand-prox {
  letter-spacing: 1.2px;
}

.brand-wiseco {
  font-style: italic;
}

.brand-supplier { font-weight: 750; }

.card-copy strong {
  line-height: 1.35;
  font-size: 16px;
}

.card-copy small {
  display: block;
  color: var(--muted);
  line-height: 1.4;
  font-size: 14px;
}

.card-copy .brand-logo {
  color: #fff;
  line-height: 1;
  font-size: 13px;
}

.card-copy .brand-prox,
.card-copy .brand-wiseco {
  color: #111;
}

.card-copy span {
  font-weight: 800;
  font-size: 16px;
}

.select-card em {
  align-self: start;
  padding: 6px 14px;
  color: #52616c;
  background: #2a2510;
  border-radius: 999px;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.brand-offer-group {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  max-width: 1200px;
}

.brand-offer-group h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.brand-offer-list {
  display: grid;
  gap: 12px;
  max-width: 1200px;
}

.brand-offer {
  display: grid;
  grid-template-columns: 24px minmax(130px, 180px) 1fr auto;
  align-items: start;
  gap: 14px;
  min-height: 120px;
  padding: 18px 20px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.brand-offer:hover {
  border-color: #444;
}

.brand-offer.is-selected {
  border-color: var(--brand-dark);
  box-shadow: 0 0 0 3px rgba(77, 98, 113, 0.18), var(--shadow);
}

.radio-dot {
  width: 15px;
  height: 15px;
  border: 1px solid #8d949a;
  border-radius: 999px;
}

.brand-offer.is-selected .radio-dot {
  border: 5px solid var(--brand-dark);
}

.offer-brand .brand-logo {
  min-width: 140px;
  min-height: 44px;
  font-size: 14px;
  padding: 7px 16px;
}

.offer-details,
.offer-price {
  display: grid;
  gap: 5px;
}

.offer-details strong {
  font-size: 17px;
}

.offer-details {
  gap: 6px;
}

.offer-details small,
.offer-price del,
.offer-price small {
  display: block;
  color: var(--muted);
  line-height: 1.4;
  font-size: 14px;
}

.offer-price del {
  font-size: 13px;
}

.offer-price {
  justify-items: end;
  min-width: 148px;
  text-align: right;
}

.offer-price strong {
  font-size: 18px;
  white-space: nowrap;
}

.offer-price em {
  padding: 3px 8px;
  color: #111;
  background: var(--brand);
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.group {
  margin-bottom: 26px;
}

.group h3 {
  margin: 0 0 12px;
  font-size: 17px;
}

.empty {
  margin: 0 0 24px;
  color: var(--muted);
}

.notice {
  max-width: 980px;
  margin: 0 0 14px;
  padding: 12px 14px;
  color: var(--brand);
  background: #f1f4f5;
  border: 1px solid #d3dbe0;
  border-radius: 8px;
  line-height: 1.45;
}

.intro-panel {
  max-width: 980px;
  margin: 0 0 18px;
  padding: 16px 18px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 5px solid var(--brand);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.intro-panel p {
  margin: 0 0 10px;
  font-weight: 800;
}

.intro-panel ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.45;
}

.actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 34px;
  border-top: 1px solid var(--line);
  background: rgba(28, 28, 28, 0.92);
}

.primary,
.secondary {
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  font-weight: 800;
}

.primary {
  color: #fff;
  background: var(--brand-dark);
  border: 1px solid #000;
}

.secondary {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
}

.secondary:disabled {
  cursor: default;
  opacity: 0.45;
}

.summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.summary-actions {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  gap: 10px;
}

.final-form {
  display: grid;
  gap: 16px;
  max-width: 980px;
  margin: 0 0 18px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.final-form h3 {
  margin: 0;
  font-size: 17px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.full {
  grid-column: 1 / -1;
}

.delivery-choice {
  display: grid;
  gap: 10px;
}

.delivery-choice > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.contact-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.summary h3 {
  margin: 0 0 14px;
}

.price-disclaimer {
  margin: 0 0 12px;
  padding: 11px 13px;
  color: #33414b;
  background: #eef1f3;
  border: 1px solid #d2d9de;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
}
.form-error {
  margin: 0;
  padding: 10px 12px;
  color: #7b2626;
  background: #f8eeee;
  border: 1px solid #dfbebe;
  border-radius: 8px;
  font-size: 13px;
}
.form-error[hidden] { display: none; }

pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  line-height: 1.5;
}



.success-panel {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
}

.success-icon {
  font-size: 64px;
  margin: 0 0 20px;
}

.success-panel h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 26px;
}

.success-panel p {
  margin: 0 0 24px;
  color: var(--muted);
  line-height: 1.5;
}

.success-details {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  margin: 0 0 24px;
  text-align: center;
}

.success-details p {
  margin: 0 0 10px;
  font-size: 15px;
}

.status-link {
  display: inline-block;
  color: var(--brand);
  font-size: 16px;
  font-weight: 600;
  word-break: break-all;
  text-decoration: none;
  padding: 8px 16px;
  background: rgba(77, 98, 113, .1);
  border-radius: 6px;
  margin: 0 0 6px;
}

.status-link:hover {
  background: rgba(77, 98, 113, .16);
}

.status-hint {
  font-size: 13px !important;
  color: var(--muted) !important;
  margin: 10px 0 0 !important;
}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    gap: 14px;
    padding: 14px;
  }

  .steps {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  .step {
    justify-content: center;
    padding: 10px 4px;
    font-size: 0;
    min-height: 44px;
  }

  .step span {
    font-size: 15px;
    width: 34px;
    height: 34px;
  }

  .topbar {
    display: grid;
    padding: 18px 16px 14px;
  }

  .topbar h2 {
    font-size: 22px;
  }

  .quick-fields,
  .model-form {
    grid-template-columns: 1fr 110px;
  }

  .screen {
    padding: 16px 14px 20px;
  }

  .actions {
    padding: 14px 16px;
  }

  .actions .primary,
  .actions .secondary {
    min-height: 48px;
    font-size: 15px;
    padding: 0 24px;
  }

  .summary {
    grid-template-columns: 1fr;
  }

  .field-grid,
  .contact-options {
    grid-template-columns: 1fr;
  }

  .summary-actions {
    flex-wrap: wrap;
  }

  .manufacturer-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }

  .segment-row {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }

  .brand-offer-group {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

@media (max-width: 520px) {
  .sidebar {
    gap: 10px;
    padding: 10px;
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .brand h1 {
    font-size: 16px;
  }

  .quick-fields,
  .model-form {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .card-grid.compact {
    grid-template-columns: 1fr;
  }

  .select-card {
    grid-template-columns: 32px 1fr;
    min-height: 110px;
    padding: 14px;
  }

  .select-card em {
    grid-column: 2;
    justify-self: start;
  }

  .brand-offer {
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .offer-brand,
  .offer-price {
    grid-column: 2;
    justify-items: start;
    text-align: left;
  }

  .brand-offer-group {
    grid-template-columns: 1fr;
  }

  .manufacturer-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }

  .segment-row {
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
  }

  .segment {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 14px;
  }

  .topbar h2 {
    font-size: 18px;
  }

  .screen {
    padding: 12px 12px 16px;
  }

  .actions {
    padding: 10px 12px;
  }

  .actions .primary,
  .actions .secondary {
    flex: 1;
    min-height: 48px;
  }

  .nav-links a {
    font-size: 12px;
    padding: 5px 10px;
  }
}

@media (max-width: 400px) {
  .sidebar {
    padding: 8px;
  }

  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
  }

  .step span {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .manufacturer-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
  }

  .manufacturer {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 13px;
  }

  .brand-mark {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }

  .brand h1 {
    font-size: 14px;
  }

  .brand p {
    font-size: 11px;
  }
}

/* PN-Technik customer portal — graphite, steel and the original white wordmark. */
:root {
  --ink: #17212b;
  --muted: #65727e;
  --line: #d9dfe4;
  --paper: #eef1f3;
  --panel: #ffffff;
  --brand: #26333e;
  --brand-dark: #111a22;
  --accent: #7e8d98;
  --shadow: 0 12px 34px rgba(18, 29, 39, .08);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { color: var(--ink); background: var(--paper); line-height: 1.5; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell {
  width: min(1440px, calc(100% - 40px));
  min-height: min(900px, calc(100vh - 48px));
  margin: 24px auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d9dfe4;
  border-radius: 15px;
  box-shadow: 0 18px 56px rgba(20, 31, 41, .08);
  grid-template-columns: 248px minmax(0, 1fr);
}
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 27px;
  padding: 21px 14px 15px;
  color: #f5f7f8;
  background: #1c2730;
  border-right: 1px solid #26333e;
}
.brand {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 15px 13px 17px;
  background: #222e38;
  border: 1px solid #34414b;
  border-radius: 8px;
}
.pn-wordmark { display: block; width: 184px; height: 28px; object-fit: contain; object-position: left center; }
.brand p { margin: 0; color: #bdc6cd; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.steps { display: grid; gap: 4px; }
.step {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 43px;
  padding: 7px 9px;
  color: #c6ced4;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 620;
}
.step span {
  display: grid;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  place-items: center;
  color: #dbe0e4;
  background: #303c46;
  border: 1px solid #46535e;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.step.is-active {
  color: #fff;
  background: #303c46;
  border-color: #53616d;
}
.step.is-active span { color: #1c2730; background: #e7ebee; border-color: #e7ebee; }
.step:disabled { opacity: .45; cursor: default; }
.nav-links { margin: auto 0 0; padding: 0 4px; }
.nav-links a {
  display: block;
  padding: 10px 12px;
  color: #cbd3d9;
  text-decoration: none;
  border: 1px solid #45515c;
  border-radius: 6px;
  font-size: 12px;
}
.nav-links a:hover { color: #fff; background: #2b3741; }
.workspace { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; background: #fff; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 25px clamp(24px, 4vw, 54px) 21px;
  background: #fff;
  border-bottom: 1px solid #e6eaed;
}
.topbar h2 { margin: 4px 0 0; color: #17212b; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.15; letter-spacing: -.55px; }
.eyebrow { margin: 0; color: #63717c; font-size: 10px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.journey-progress { width: min(260px, 30%); flex: 0 0 auto; }
.progress-copy { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 7px; color: #65727e; font-size: 10px; }
.progress-copy span:first-child { color: #26333e; font-weight: 750; }
.progress-track { height: 4px; overflow: hidden; background: #e7ebee; border-radius: 4px; }
.progress-track span { display: block; width: 14.3%; height: 100%; background: #34434f; transition: width .22s ease; }
.screen { width: 100%; max-width: 1120px; margin: 0 auto; padding: 28px clamp(24px, 4vw, 54px) 36px; overflow: visible; }
.screen-lead { max-width: 680px; margin: -3px 0 19px; color: #65727e; font-size: 13px; }
.screen > h3, .group h3, .intro-panel h3, .final-form h3, .summary h3 { color: #1c2730; font-size: 16px; letter-spacing: -.15px; }
.group { margin: 0 0 26px; }
.manufacturer-search { position: relative; max-width: 470px; margin: 0 0 16px; }
.manufacturer-search input { padding-left: 39px; }
.manufacturer-search::before { content: ""; position: absolute; left: 14px; top: 15px; width: 12px; height: 12px; border: 1.5px solid #73818b; border-radius: 50%; }
.manufacturer-search::after { content: ""; position: absolute; left: 26px; top: 27px; width: 6px; height: 1.5px; background: #73818b; transform: rotate(45deg); transform-origin: left center; }
.manufacturer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 9px; }
.manufacturer, .select-card, .segment {
  color: #202b34;
  background: #fff;
  border: 1px solid #d7dde2;
  border-radius: 7px;
  box-shadow: 0 1px 3px rgba(16, 26, 34, .025);
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.manufacturer { min-height: 52px; padding: 11px 13px; text-align: left; font-size: 13px; font-weight: 650; }
.manufacturer:hover, .select-card:hover, .segment:hover { background: #f7f9fa; border-color: #83909a; }
.manufacturer.is-selected, .select-card.is-selected, .segment.is-selected { background: #edf1f3; border-color: #35434e; box-shadow: inset 0 0 0 1px #35434e; }
.card-grid, .card-grid.compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 9px; }
.select-card { position: relative; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; align-items: start; min-height: 104px; padding: 14px; gap: 11px; text-align: left; }
.card-copy { display: grid; gap: 5px; min-width: 0; }
.card-copy strong, .offer-details strong { color: #1d2831; font-size: 13px; line-height: 1.35; }
.card-copy small, .offer-details small { color: #687580; font-size: 11px; line-height: 1.45; }
.card-copy > span { color: #4e5c67; font-size: 11px; }
.check { display: grid; width: 21px; height: 21px; place-items: center; color: transparent; background: #f1f3f5; border: 1px solid #d5dce1; border-radius: 5px; font-size: 12px; font-weight: 800; }
.is-selected .check { color: white; background: #26333e; border-color: #26333e; }
.select-card em { padding: 3px 7px; color: #42515d; background: #e8edf0; border-radius: 4px; font-size: 9px; font-weight: 700; }
.segment-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 190px)); gap: 8px; }
.segment { min-height: 45px; padding: 10px 14px; text-align: center; font-size: 12px; font-weight: 650; }
label { display: grid; gap: 6px; color: #3c4954; font-size: 11px; font-weight: 700; }
input, textarea { width: 100%; min-height: 44px; padding: 10px 12px; color: #17212b; background: #fff; border: 1px solid #cfd7dd; border-radius: 6px; outline: none; font-size: 13px; }
textarea { resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #8b969f; }
input:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid rgba(77, 98, 113, .28); outline-offset: 2px; border-color: #647682; }
.model-form, .model-form-highlight { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(130px, 180px); gap: 12px; max-width: 800px; margin: 0 0 14px; padding: 16px; background: #f4f6f7; border: 1px solid #dce2e6; border-radius: 7px; box-shadow: none; }
.model-form-highlight { border-color: #cdd5db; background: #f4f6f7; }
.model-form-highlight label { color: #3c4954 !important; font-size: 11px; text-transform: none; letter-spacing: 0; }
.model-form-highlight input { min-height: 44px; color: #17212b; background: #fff; border: 1px solid #cfd7dd; font-size: 13px; font-weight: 500; }
.model-form-highlight input::placeholder { color: #8b969f; }
.model-form-highlight input:focus { border-color: #647682; box-shadow: 0 0 0 3px rgba(77, 98, 113, .15); }
.empty { color: #65727e; font-size: 12px; }
.intro-panel, .final-form, .summary, .success-details { color: #1c2730; background: #fff; border: 1px solid #dce2e6; border-radius: 8px; box-shadow: none; }
.intro-panel, .final-form { padding: 18px; }
.check-option, .check-option.inline { color: #1c2730; background: #f5f7f8; border: 1px solid #dce2e6; border-radius: 7px; box-shadow: none; }
.check-option small { color: #67747e; }
.actions { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; gap: 12px; padding: 13px clamp(24px, 4vw, 54px); background: rgba(255,255,255,.97); border-top: 1px solid #e3e8eb; backdrop-filter: blur(8px); }
.actions button, .summary-actions button, .final-form button, #loading-error button { min-height: 44px; padding: 0 18px; border-radius: 6px; font-size: 12px; font-weight: 700; }
button.primary, .actions .primary { color: #fff; background: #26333e; border: 1px solid #1d2831; box-shadow: none; }
button.primary:hover, .actions .primary:hover { background: #111a22; }
button.secondary, .actions .secondary { color: #35424c; background: #fff; border: 1px solid #cfd7dd; }
button:disabled { opacity: .48; cursor: not-allowed; transform: none !important; }
.success-panel h2 { color: #17212b; }
.success-panel p, .status-hint { color: #65727e !important; }
.success-details { padding: 20px; }
.status-link { color: #24323d; background: #edf1f3; }

html.embed-mode, html.embed-mode body { min-height: 0; background: transparent; }
html.embed-mode .app-shell { width: 100%; min-height: 0; margin: 0; grid-template-columns: minmax(0,1fr); border: 0; border-radius: 0; box-shadow: none; }
html.embed-mode .sidebar { display: none; }
html.embed-mode .topbar { justify-content: flex-start; gap: 15px; padding: 18px clamp(16px,4vw,42px) 15px; border-bottom: 1px solid #e6eaed; }
html.embed-mode .topbar::before { content: ""; display: block; flex: 0 0 166px; width: 166px; height: 34px; background: #202a33 url("assets/pn-technik-logo.svg") center / 144px 18px no-repeat; border-radius: 5px; }
html.embed-mode .journey-progress { margin-left: auto; }
html.embed-mode .screen { padding-top: 21px; padding-bottom: 24px; }
html.embed-mode .actions { position: static; padding: 12px clamp(16px,4vw,42px) 17px; }

.target-grid { display: grid; gap: 10px; max-width: 800px; }
.target-choice, .component-choice { display: grid; grid-template-columns: 32px minmax(0,1fr) 22px; align-items: center; gap: 13px; min-height: 76px; padding: 14px 16px; color: #1d2831; text-align: left; background: #fff; border: 1px solid #d5dce1; border-radius: 7px; }
.target-choice:hover, .component-choice:hover { border-color: #84919b; background: #f8f9fa; }
.target-choice.is-selected, .component-choice.is-selected { border-color: #34424d; box-shadow: inset 0 0 0 1px #34424d; background: #f0f3f5; }
.target-index { color: #64727d; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.target-copy, .component-choice > span:last-child { display: grid; gap: 4px; }
.target-copy strong, .component-choice strong { font-size: 14px; }
.target-copy small, .component-choice small { color: #687580; font-size: 12px; line-height: 1.4; }
.target-chevron { color: #82909a; font-size: 20px; }
.component-grid { max-width: 900px; }
.component-choice { grid-template-columns: 15px minmax(0,1fr); min-height: 70px; }
.component-indicator { width: 12px; height: 12px; border: 1px solid #9aa5ad; border-radius: 50%; }
.component-choice.is-selected .component-indicator { background: #34424d; border-color: #34424d; box-shadow: inset 0 0 0 3px white; }
.component-brand { max-width: 520px; margin: 18px 0 0; }
.technical-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; max-width: 760px; margin-top: 18px; }
.optional-label { color: #7a8791; font-size: 10px; font-weight: 600; }
.summary-intro { margin: -5px 0 14px; color: #63717c; font-size: 13px; }
.summary-details { display: grid; gap: 0; border-top: 1px solid #e0e5e8; }
.summary-row { display: grid; grid-template-columns: minmax(135px, 190px) minmax(0,1fr); gap: 18px; padding: 12px 0; border-bottom: 1px solid #e8ecef; font-size: 13px; }
.summary-row strong { color: #43515c; }
.summary-row span { min-width: 0; overflow-wrap: anywhere; }
.summary-caveat { margin: 14px 0 0; padding: 12px 14px; color: #3e4c56; background: #f1f4f5; border-left: 3px solid #687781; font-size: 12px; }
.text-action { min-height: 40px; margin: 2px 0 14px; padding: 8px 0; color: #354651; background: transparent; border: 0; border-bottom: 1px solid #aeb8bf; border-radius: 0; text-align: left; font-size: 12px; font-weight: 700; }
.text-action:hover { color: #101a22; border-color: #34424d; }
.step:disabled { color: #a5b0b7; opacity: 1; }
.step:disabled span { color: #a5b0b7; }
#next-button:disabled, .actions .primary:disabled, .actions .secondary:disabled { color: #56636d; background: #e5e9ec; border-color: #d3dade; opacity: 1; }
.draft-toggle { display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: start; gap: 10px; max-width: 760px; margin: 0 0 18px; padding: 11px 13px; color: #42515c; background: #f6f8f9; border: 1px solid #e1e6e9; border-radius: 6px; font-size: 11px; }
.draft-toggle input { width: 16px; min-height: 16px; height: 16px; margin: 1px 0 0; accent-color: #34424d; }
.draft-toggle span { display: grid; gap: 2px; }
.draft-toggle strong { font-size: 11px; }
.draft-toggle small { color: #6b7882; font-size: 10px; line-height: 1.4; font-weight: 500; }
.form-error { margin-top: 12px; }
@media (max-width: 700px) {
  .target-choice { min-height: 72px; padding: 12px; }
  .technical-fields { grid-template-columns: 1fr; }
  .summary-row { grid-template-columns: 1fr; gap: 4px; }
  .component-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .app-shell { width: min(100%,760px); min-height: 100vh; margin: 0 auto; border-radius: 0; grid-template-columns: minmax(0,1fr); }
  .sidebar { gap: 12px; padding: 10px 12px 7px; border-right: 0; border-bottom: 1px solid #34414b; }
  .brand { display: flex; align-items: center; gap: 12px; padding: 0 4px; background: transparent; border: 0; }
  .pn-wordmark { width: 156px; height: 24px; }
  .brand p { margin-left: auto; font-size: 9px; }
  .steps { display: flex; gap: 4px; overflow-x: auto; padding: 0 0 4px; scrollbar-width: thin; }
  .step { flex: 0 0 auto; width: auto; min-width: 72px; min-height: 44px; flex-direction: column; gap: 3px; padding: 4px 7px; font-size: 9px; white-space: nowrap; }
  .step span { flex-basis: 21px; width: 21px; height: 21px; font-size: 10px; }
  .nav-links { display: none; }
  .topbar { padding: 19px 21px 16px; }
  .screen { padding: 20px 21px 26px; }
  .actions { padding: 11px 21px; }
}
@media (max-width: 560px) {
  .topbar { align-items: flex-start; flex-direction: column; gap: 13px; padding: 16px 15px 14px; }
  .topbar h2 { font-size: 22px; }
  .journey-progress { width: 100%; }
  .progress-copy { font-size: 10px; }
  .screen { padding: 16px 15px 22px; }
  .manufacturer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .manufacturer { min-height: 47px; padding: 9px 10px; font-size: 12px; }
  .card-grid, .card-grid.compact { grid-template-columns: 1fr; gap: 7px; }
  .select-card { min-height: 88px; padding: 12px; }
  .segment-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .segment { min-height: 44px; padding: 9px 7px; font-size: 11px; }
  .model-form, .model-form-highlight { grid-template-columns: 1fr; padding: 13px; }
  .field-grid, .contact-options { grid-template-columns: 1fr; }
  .actions { padding: 10px 12px; gap: 8px; }
  .actions .primary, .actions .secondary { flex: 1; min-height: 46px; padding: 0 12px; }
  html.embed-mode .topbar { flex-direction: row; align-items: center; padding: 12px; }
  html.embed-mode .topbar::before { flex-basis: 126px; width: 126px; height: 28px; background-size: 108px 14px; }
  html.embed-mode .journey-progress { width: min(45%,200px); }
  html.embed-mode .screen { padding: 16px 12px 20px; }
  html.embed-mode .actions { padding: 10px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Motorcycle catalogue: compact, searchable and source-conscious. */
.motorcycle-catalog-search { display:grid; gap:7px; margin:18px 0 12px; color:#34434f; font-size:13px; font-weight:700; }
.motorcycle-catalog-search input { min-height:46px; padding:10px 13px; border:1px solid #cbd3d8; border-radius:6px; background:#fff; color:#1d2931; font:inherit; }
.motorcycle-catalog-search input:focus-visible, .motorcycle-catalog-filters select:focus-visible, .motorcycle-model-option:focus-visible { outline:3px solid #557184; outline-offset:2px; }
.motorcycle-catalog-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:14px; }
.motorcycle-catalog-filters select { min-width:0; min-height:42px; padding:8px 30px 8px 10px; border:1px solid #d1d8dc; border-radius:5px; background:#f8f9fa; color:#34434f; font:inherit; }
.motorcycle-results-heading { display:flex; align-items:center; justify-content:space-between; min-height:32px; color:#5c6870; font-size:12px; }
.motorcycle-results-heading p { margin:5px 0; }
.motorcycle-family-group { margin:12px 0 18px; }
.motorcycle-family-group h3 { margin:0 0 8px; color:#34434f; font-size:13px; letter-spacing:.035em; }
.motorcycle-model-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.motorcycle-model-option { display:grid; align-content:start; gap:6px; min-height:76px; padding:12px; text-align:left; border:1px solid #d8dee2; border-radius:5px; background:linear-gradient(145deg,#fff,#f5f7f8); color:#25313a; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease; }
.motorcycle-model-option strong { font-size:14px; line-height:1.25; }
.motorcycle-model-option small { color:#697780; font-size:11px; line-height:1.4; }
.motorcycle-model-option:hover { transform:translateY(-2px); border-color:#7d8e98; box-shadow:0 7px 18px rgba(27,41,51,.09); }
.motorcycle-model-option.is-selected { border-color:#344b5a; background:#edf1f3; box-shadow:inset 3px 0 #344b5a; }
.motorcycle-manual-entry { margin-top:16px; }
.motorcycle-catalog-boundary { margin-top:10px; font-size:12px; }
@media(max-width:720px) { .motorcycle-model-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:520px) { .motorcycle-catalog-filters { grid-template-columns:1fr; gap:7px; }.motorcycle-catalog-filters select { min-height:44px; }.motorcycle-model-grid { grid-template-columns:1fr; }.motorcycle-model-option { min-height:64px; } }
@media(prefers-reduced-motion:reduce) { .motorcycle-model-option { transition:none; }.motorcycle-model-option:hover { transform:none; } }

/* Quiet mechanical feedback: movement reinforces selection rather than decorating the page. */
.target-choice, .component-choice, .select-card, .manufacturer, .segment, .actions button, .summary-actions button {
  transition: transform var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-content) ease;
}
.target-choice:hover, .component-choice:hover, .select-card:hover, .manufacturer:hover, .segment:hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(25,37,47,.08); }
.target-choice:active, .component-choice:active, .select-card:active, .manufacturer:active, .segment:active, .actions button:active { transform: translateY(0) scale(.99); }
.target-symbol { display:grid; width:42px; height:42px; place-items:center; color:#34434f; background:#f0f3f5; border:1px solid #e0e5e8; border-radius:8px; transition: color .2s ease, background .2s ease, transform .25s ease; }
.target-symbol svg, .target-chevron svg, .component-indicator svg, .check svg, .component-check svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.target-choice:hover .target-symbol { color:#fff; background:#34434f; transform:rotate(-4deg); }
.target-choice.is-selected .target-symbol { color:#fff; background:#26333e; }
.target-copy { gap:5px; }
.target-meta { color:#7a8791; font-size:9px; font-weight:800; letter-spacing:.13em; }
.target-chevron { display:grid; width:25px; height:25px; place-items:center; color:#78858e; transition: transform .2s ease, color .2s ease; }
.target-choice:hover .target-chevron { color:#26333e; transform:translateX(3px); }
.target-choice.is-selected .target-chevron { color:#26333e; }
.component-choice { grid-template-columns:28px minmax(0,1fr) 20px; }
.component-choice > span:nth-child(2) { display:grid; gap:4px; min-width:0; }
.component-indicator { display:grid; width:26px; height:26px; place-items:center; border:0; border-radius:6px; color:#64727d; background:#f1f4f6; }
.component-indicator svg { width:18px; height:18px; }
.component-choice.is-selected .component-indicator { color:white; background:#34424d; box-shadow:none; }
.component-check { color:#26333e; opacity:0; transform:scale(.65); transition:opacity .18s ease, transform .18s ease; }
.component-choice.is-selected .component-check { opacity:1; transform:scale(1); }
.check { display:grid; place-items:center; transition:background .18s ease, transform .18s ease; }
.is-selected .check { transform:scale(1.04); }
.is-selected .check svg { width:15px; height:15px; stroke-width:2.4; }
.step { transition:color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.step.is-active { transform:translateX(2px); }
.step.is-complete .step-mark { color:#fff; background:#53616d; border-color:#64737e; }
.step-mark svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.screen-enter-next { animation: screen-enter-next var(--motion-step) var(--motion-ease) both; }
.screen-enter-back { animation: screen-enter-back var(--motion-step) var(--motion-ease) both; }
.screen-enter-next .screen-lead, .screen-enter-next .intro-panel, .screen-enter-next .target-choice, .screen-enter-next .component-choice, .screen-enter-next .select-card, .screen-enter-next .final-form, .screen-enter-next .summary { animation: motion-rise var(--motion-content) var(--motion-ease) both; }
.screen-enter-back .screen-lead, .screen-enter-back .intro-panel, .screen-enter-back .target-choice, .screen-enter-back .component-choice, .screen-enter-back .select-card, .screen-enter-back .final-form, .screen-enter-back .summary { animation: motion-rise-back var(--motion-content) var(--motion-ease) both; }
.screen-enter-next .target-choice:nth-child(2), .screen-enter-next .component-choice:nth-child(2), .screen-enter-next .select-card:nth-child(2) { animation-delay:35ms; }
.screen-enter-next .target-choice:nth-child(3), .screen-enter-next .component-choice:nth-child(3), .screen-enter-next .select-card:nth-child(3) { animation-delay:70ms; }
.screen-enter-back .target-choice:nth-child(2), .screen-enter-back .component-choice:nth-child(2), .screen-enter-back .select-card:nth-child(2) { animation-delay:25ms; }
.screen-enter-back .target-choice:nth-child(3), .screen-enter-back .component-choice:nth-child(3), .screen-enter-back .select-card:nth-child(3) { animation-delay:50ms; }
.choice-confirm { animation: choice-confirm var(--motion-select) var(--motion-ease) both; }
.step { transition:color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.step.is-active { transform:translateX(2px); }
.step.is-complete .step-mark { color:#fff; background:#53616d; border-color:#64737e; }
.step-mark svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.motion-workbench { display:grid; grid-template-columns:126px minmax(0,1fr); align-items:center; gap:18px; max-width:760px; margin:4px 0 18px; padding:12px 18px; overflow:hidden; color:#dce2e6; background:#202b34; border:1px solid #35434d; border-radius:8px; }
.workbench-drawing { position:relative; display:grid; width:112px; height:116px; place-items:center; overflow:hidden; background:linear-gradient(135deg,rgba(255,255,255,.035),transparent 60%),repeating-linear-gradient(0deg,transparent 0 17px,rgba(220,229,235,.055) 17px 18px),repeating-linear-gradient(90deg,transparent 0 17px,rgba(220,229,235,.055) 17px 18px); border:1px solid rgba(220,229,235,.12); border-radius:5px; }
.workbench-drawing svg { width:96px; height:104px; overflow:visible; }
.part-outline, .measure-line, .bore-line { fill:none; stroke:#c6d0d7; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.measure-line { stroke:#92a2ad; stroke-width:1.2; stroke-dasharray:115; animation: measure-draw .7s var(--motion-ease) both; }
.bore-line { stroke:#eef2f4; stroke-width:2; }
.drawing-axis { position:absolute; top:0; bottom:0; left:50%; width:1px; background:linear-gradient(transparent,rgba(226,234,239,.3),transparent); opacity:.6; }
.workbench-copy { display:grid; gap:4px; }
.workbench-tag { color:#aebbc4; font-size:9px; font-weight:800; letter-spacing:.14em; }
.workbench-copy strong { color:#fff; font-size:15px; }
.workbench-copy p { max-width:480px; margin:0; color:#c1cbd1; font-size:11px; line-height:1.45; }
.workbench-state { display:flex; align-items:center; gap:7px; margin-top:4px; color:#d7dfe4; font-size:10px; font-weight:650; }
.workbench-state i { width:6px; height:6px; background:#8e9da7; border-radius:50%; }
.workbench-state.is-selected i { background:#dce4e8; box-shadow:0 0 0 3px rgba(220,228,232,.12); }
.primary, .actions button, .summary-actions button { position:relative; overflow:hidden; transition:transform .16s var(--motion-ease), box-shadow .2s ease, background-color .2s ease; }
.primary::after, .actions button::after, .summary-actions button::after { content:""; position:absolute; top:-40%; bottom:-40%; left:-40%; width:24%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); transform:skewX(-18deg) translateX(-180%); pointer-events:none; }
.primary:hover::after, .actions button:hover::after, .summary-actions button:hover::after { transform:skewX(-18deg) translateX(760%); transition:transform .55s var(--motion-ease); }
.primary:active, .actions button:active, .summary-actions button:active { transform:scale(.985); }
.success-icon { transform-origin:center; animation:success-mark .48s var(--motion-ease) both; }
.success-panel { animation:motion-rise .4s var(--motion-ease) both; }
.form-error:not([hidden]) { animation:validation-nudge .24s ease-out both; }
.button-spinner { width:15px; height:15px; flex:none; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:button-spin .75s linear infinite; }
html.pn-motion-intro .brand { position:relative; overflow:hidden; animation:brand-arrive .52s var(--motion-ease) both; }
html.pn-motion-intro .brand::after { content:""; position:absolute; top:-10%; bottom:-10%; left:0; width:34%; background:linear-gradient(90deg,transparent,rgba(225,234,239,.13),transparent); transform:translateX(-150%); animation:brand-scan .64s .14s var(--motion-ease) both; pointer-events:none; }
@keyframes screen-enter-next { from { opacity:.55; transform:translateX(15px); } to { opacity:1; transform:translateX(0); } }
@keyframes screen-enter-back { from { opacity:.55; transform:translateX(-15px); } to { opacity:1; transform:translateX(0); } }
@keyframes motion-rise { from { opacity:.72; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@keyframes motion-rise-back { from { opacity:.72; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@keyframes brand-arrive { from { opacity:.72; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
@keyframes brand-scan { to { transform:translateX(460%); opacity:0; } }
@keyframes measure-draw { from { stroke-dashoffset:115; opacity:.25; } to { stroke-dashoffset:0; opacity:1; } }
@keyframes success-mark { 0% { transform:scale(.72); opacity:.3; } 65% { transform:scale(1.09); opacity:1; } 100% { transform:scale(1); } }
@keyframes validation-nudge { 0% { transform:translateX(0); } 35% { transform:translateX(3px); } 70% { transform:translateX(-2px); } 100% { transform:translateX(0); } }
@keyframes button-spin { to { transform:rotate(360deg); } }
@keyframes choice-confirm { 0% { transform:scale(.985); } 65% { transform:scale(1.008); } 100% { transform:scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .screen-enter-next, .screen-enter-back, .screen-enter-next *, .screen-enter-back *, .choice-confirm, .success-icon, .success-panel, .form-error:not([hidden]), .button-spinner, .workbench-drawing *, html.pn-motion-intro .brand, html.pn-motion-intro .brand::after { animation:none !important; }
  .target-choice:hover, .component-choice:hover, .select-card:hover, .manufacturer:hover, .segment:hover, .primary:active, .actions button:active, .summary-actions button:active { transform:none; }
  .step.is-active { transform:none !important; transition:none !important; }
}
@media (max-width: 560px) { .motion-workbench { grid-template-columns:76px minmax(0,1fr); gap:12px; padding:10px; } .workbench-drawing { width:72px; height:84px; } .workbench-drawing svg { width:68px; height:76px; } }

/* PN-Technik automotive scenes: graphite and machined steel. */
:root { --auto-accent:#d6e0e6; }
.auto-hero { position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(320px,1.1fr); min-height:244px; max-width:1030px; margin:0 0 24px; overflow:hidden; color:#e8edf0; background:#182129; border:1px solid #33414b; border-radius:7px; box-shadow:0 16px 38px rgba(14,22,28,.13); }
.auto-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 42%),repeating-linear-gradient(0deg,transparent 0 31px,rgba(214,224,230,.025) 31px 32px); }
.auto-hero-copy { position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:28px clamp(22px,4vw,46px); }
.hero-kicker { display:inline-flex; align-items:center; gap:8px; color:#aebbc4; font-size:9px; font-weight:800; letter-spacing:.16em; }
.hero-kicker i { width:6px; height:6px; background:#a9b8c2; border-radius:50%; }
.auto-hero h3 { max-width:390px; margin:14px 0 9px; color:#f6f8f9; font-size:clamp(22px,3vw,34px); line-height:1.08; letter-spacing:-.035em; }
.auto-hero-copy p { max-width:390px; margin:0 0 19px; color:#b7c1c8; font-size:12px; line-height:1.55; }
.hero-cta { display:flex; align-items:center; gap:16px; min-height:42px; padding:0 14px; color:#19232b; background:#d6e0e6; border:1px solid #edf2f5; border-radius:4px; font-size:11px; font-weight:800; transition:background .2s ease,transform .2s ease; }
.hero-cta:hover { background:#fff; transform:translateY(-1px); }
.hero-cta span { font-size:17px; }
.hero-scene { position:relative; display:grid; align-items:center; min-height:220px; overflow:hidden; background:radial-gradient(ellipse at 56% 68%,rgba(153,169,180,.17),transparent 55%),linear-gradient(180deg,transparent 68%,rgba(5,9,12,.42)); }
.hero-scene::before { content:""; position:absolute; left:5%; right:0; bottom:20%; height:1px; background:linear-gradient(90deg,transparent,rgba(206,219,227,.42),transparent); }
.hero-car { position:relative; z-index:1; width:min(95%,530px); margin:20px auto 0; overflow:visible; }
.hero-car .car-body { fill:#6f7c85; stroke:#c3cdd3; stroke-width:1.5; }
.hero-car .car-shadow { fill:#080c0f; opacity:.8; }
.hero-car .car-window { fill:#202c34; stroke:#aebbc4; stroke-width:1; }
.hero-car .car-cutline,.hero-car .car-light { fill:none; stroke:#c8d1d6; stroke-width:1.2; opacity:.72; }
.hero-car .car-wheel { fill:#10161a; stroke:#9ba8b0; stroke-width:3; }
.hero-car .car-wheel-inner { fill:#697781; stroke:#c2cbd0; stroke-width:2; transform-box:fill-box; transform-origin:center; }
.hero-scan { position:absolute; z-index:2; top:18%; bottom:18%; left:18%; width:1px; opacity:0; background:linear-gradient(transparent,rgba(204,216,224,.7),transparent); box-shadow:0 0 14px rgba(204,216,224,.2); }
html.pn-motion-intro .hero-car { animation:car-arrive .7s cubic-bezier(.18,.72,.24,1) both; }
html.pn-motion-intro .hero-car .car-wheel-inner { animation:wheel-turn .68s ease-out both; }
html.pn-motion-intro .hero-scan { animation:hero-scan .95s ease-out .08s both; }
.hero-coordinate,.hero-spec { position:absolute; z-index:2; color:#98a7b0; font-size:8px; font-weight:800; letter-spacing:.15em; }
.hero-coordinate { top:18px; right:20px; }.hero-spec { left:22px; bottom:14px; }
.target-choice:focus-visible,.car-manufacturer:focus-visible,.layout-choice:focus-visible,.fuel-option:focus-visible,.hero-cta:focus-visible { outline:3px solid #8c9ba5; outline-offset:3px; }
.car-manufacturer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; max-width:900px; }
.car-manufacturer { display:flex; align-items:center; gap:10px; min-width:0; min-height:54px; padding:8px 11px; color:#27333c; background:#fff; border:1px solid #d8dfe3; border-radius:5px; text-align:left; font-size:12px; font-weight:700; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; }
.car-manufacturer:hover { transform:translateY(-2px); border-color:#65747e; box-shadow:0 6px 16px rgba(28,40,49,.08); }
.car-manufacturer.is-selected { background:#eef2f4; border-color:#35444e; box-shadow:inset 0 0 0 1px #35444e; }
.maker-mark { display:grid; flex:0 0 30px; width:30px; height:30px; place-items:center; color:#dfe5e8; background:#35434c; border:1px solid #56636c; border-radius:4px; font-size:9px; letter-spacing:.04em; }
.maker-check { display:grid; width:16px; height:16px; place-items:center; margin-left:auto; color:#35444e; opacity:0; transform:scale(.7); transition:opacity .16s ease,transform .16s ease; }
.maker-check svg { width:15px; fill:none; stroke:currentColor; stroke-width:2; }
.car-manufacturer.is-selected .maker-check { opacity:1; transform:scale(1); }
.car-maker-actions { display:flex; flex-wrap:wrap; gap:18px; margin-top:14px; }
.car-manufacturer-custom { max-width:480px; margin:12px 0; }
.catalog-boundary { max-width:900px; margin:0 0 18px; padding:13px 16px; color:#35434c; background:#f2f5f6; border:1px solid #dce3e7; border-left:3px solid #677680; }
.catalog-boundary p { margin:5px 0 0; font-size:12px; line-height:1.5; }
.catalog-mark { color:#61717b; font-size:9px; font-weight:850; letter-spacing:.13em; }
.car-series-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:900px; padding:16px; background:#f7f8f9; border:1px solid #e1e6e9; border-radius:5px; }
.car-technical-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; max-width:900px; margin:12px 0 18px; padding:16px; background:#f7f8f9; border:1px solid #e1e6e9; border-radius:5px; }
.car-technical-fields label.wide { grid-column:1/-1; }
.car-technical-fields select,.car-details-accordion select { width:100%; min-height:42px; padding:9px 11px; color:#26333d; background:#fff; border:1px solid #d5dde2; border-radius:4px; font:inherit; }
.car-details-accordion { max-width:900px; margin:0 0 20px; border:1px solid #dce3e7; border-radius:5px; background:#fff; }
.car-details-accordion summary { display:flex; align-items:center; gap:8px; min-height:49px; padding:11px 14px; color:#2c3942; cursor:pointer; font-size:12px; font-weight:750; list-style:none; }
.car-details-accordion summary::-webkit-details-marker { display:none; }
.car-details-accordion summary::after { content:"+"; margin-left:auto; color:#6b7982; font-size:18px; }
.car-details-accordion[open] summary::after { content:"−"; }
.car-details-accordion summary span { color:#78858d; font-size:10px; font-weight:550; }
.car-details-accordion .car-technical-fields { max-width:none; margin:0; border:0; border-top:1px solid #e4e9ec; border-radius:0 0 5px 5px; }
.layout-choice-grid { display:flex; flex-wrap:wrap; gap:7px; }
.layout-choice { min-height:40px; padding:8px 14px; color:#384650; background:#fff; border:1px solid #d5dde2; border-radius:4px; font-size:11px; font-weight:700; transition:transform .16s ease,border-color .16s ease,background .16s ease; }
.layout-choice:hover { transform:translateY(-1px); border-color:#77858e; }
.layout-choice.is-selected { color:#fff; background:#35434c; border-color:#35434c; }
.powertrain-visual { display:grid; grid-template-columns:220px minmax(0,1fr); align-items:center; gap:18px; max-width:900px; min-height:176px; margin:8px 0 16px; padding:14px 18px; overflow:hidden; color:#e2e8ec; background:#1d2931; border:1px solid #3a4852; border-radius:5px; }
.powertrain-svg-wrap { position:relative; display:grid; place-items:center; min-height:140px; overflow:hidden; background:repeating-linear-gradient(0deg,transparent 0 17px,rgba(215,225,231,.05) 17px 18px),repeating-linear-gradient(90deg,transparent 0 17px,rgba(215,225,231,.05) 17px 18px); border:1px solid rgba(215,225,231,.12); }
.powertrain-svg-wrap svg { width:min(100%,225px); height:145px; fill:none; stroke:#b8c4cb; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.powertrain-svg-wrap .engine-plate { fill:rgba(117,132,142,.13); stroke:#7f909a; }
.powertrain-svg-wrap .engine-grid { stroke:rgba(200,212,220,.12); stroke-width:.7; }
.powertrain-svg-wrap .crank-shaft { stroke:#e0e7ea; stroke-width:2; }
.engine-scan { position:absolute; inset:0 auto 0 0; width:1px; background:#d6e0e6; opacity:0; animation:engine-scan 1.1s ease-out both; }
.powertrain-copy { display:grid; gap:5px; }.powertrain-copy strong { color:#f1f4f6; font-size:17px; letter-spacing:.06em; }.powertrain-copy p { max-width:520px; margin:0; color:#b9c4ca; font-size:11px; line-height:1.5; }.powertrain-reading { color:#d5dfe4; font-size:10px; font-weight:700; }.powertrain-reading i { padding:0 5px; color:#7e8e98; font-style:normal; }
.car-workbench .car-engine-art { stroke:#c2cdd3; stroke-width:1.7; fill:rgba(159,174,183,.09); }.car-workbench .engine-crank { fill:none; stroke:#edf1f3; stroke-width:2; }
.workbench-scan { position:absolute; top:0; bottom:0; left:0; width:1px; background:#d4dfe5; opacity:0; animation:engine-scan .85s ease-out both; }
.car-catalog-note h3 { margin:7px 0; color:#24313a; font-size:16px; }.parts-route { display:flex; align-items:center; gap:10px; margin-top:15px; color:#52616a; font-size:9px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }.parts-route i { position:relative; flex:0 1 68px; height:1px; background:#aeb9bf; }.parts-route i::after { content:""; position:absolute; top:-2px; left:0; width:5px; height:5px; background:#53626c; border-radius:50%; animation:route-travel .95s ease-out both; }
.shipping-scene { display:grid; grid-template-columns:minmax(170px,280px) 1fr; align-items:center; gap:15px; max-width:900px; margin:0 0 18px; padding:11px 15px; color:#4e5c65; background:#f4f6f7; border:1px solid #e0e5e8; border-radius:5px; font-size:9px; font-weight:750; letter-spacing:.06em; }.shipping-scene svg { width:100%; max-width:280px; height:64px; fill:none; stroke:#78868f; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }.shipping-box { fill:#e6ebee; stroke:#475660; }.shipping-route-line { stroke:#9eabb2; stroke-dasharray:5 5; }.shipping-route-dot { fill:#485861; stroke:none; animation:route-travel 1.1s ease-out both; }
.car-extra-grid .select-card { min-height:84px; }
@keyframes car-arrive { from { opacity:.4; transform:translateX(36px); } to { opacity:1; transform:translateX(0); } }
@keyframes wheel-turn { from { transform:rotate(-110deg); } to { transform:rotate(0); } }
@keyframes hero-scan { from { opacity:0; transform:translateX(0); } 25% { opacity:.75; } to { opacity:0; transform:translateX(330px); } }
@keyframes engine-scan { from { opacity:0; transform:translateX(0); } 30% { opacity:.6; } to { opacity:0; transform:translateX(220px); } }
@keyframes route-travel { from { transform:translateX(0); } to { transform:translateX(60px); } }
@media (max-width:760px) { .auto-hero { grid-template-columns:1fr; }.auto-hero-copy { min-height:205px; padding:24px; }.hero-scene { min-height:160px; }.hero-car { width:min(92%,460px); margin:0 auto 8px; }.car-manufacturer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.car-series-fields { grid-template-columns:1fr; }.powertrain-visual { grid-template-columns:145px minmax(0,1fr); gap:12px; padding:10px; }.powertrain-svg-wrap { min-height:120px; }.powertrain-svg-wrap svg { height:120px; }.shipping-scene { grid-template-columns:140px minmax(0,1fr); gap:10px; padding:9px; font-size:8px; } }
@media (max-width:420px) { .auto-hero-copy { padding:20px 17px; }.hero-scene { min-height:130px; }.hero-coordinate { top:10px; right:11px; }.hero-spec { left:12px; bottom:9px; }.powertrain-visual { grid-template-columns:1fr; }.powertrain-svg-wrap { min-height:110px; }.powertrain-copy { padding:0 3px 4px; }.car-manufacturer { gap:7px; padding:7px; font-size:10px; }.maker-mark { flex-basis:27px; width:27px; height:27px; }.car-details-accordion summary { align-items:flex-start; flex-wrap:wrap; }.car-details-accordion summary span { width:100%; padding-left:0; } }
@media (prefers-reduced-motion:reduce) { .hero-car,.hero-car .car-wheel-inner,.hero-scan,.engine-scan,.workbench-scan,.parts-route i::after,.shipping-route-dot { animation:none!important; }.hero-cta:hover,.car-manufacturer:hover,.layout-choice:hover { transform:none; } }

/* Cohesive workshop journey: each form step sits inside a distinct, quiet scene. */
:root {
  --motion-step: 500ms;
  --motion-scene: 500ms;
  --motion-reveal: 340ms;
  --motion-mechanical: cubic-bezier(.16,.78,.22,1);
}
.app-shell {
  width: min(1600px, calc(100% - 32px));
  min-height: min(980px, calc(100vh - 32px));
  margin: 16px auto;
  grid-template-columns: 236px minmax(0,1fr);
  border-radius: 11px;
}
.screen { max-width: 1280px; padding-top: 24px; }
.journey-scene {
  --scene-tone: #ced8de;
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px,.88fr) minmax(300px,1.12fr);
  align-items: stretch;
  min-height: 274px;
  margin: 0 0 25px;
  overflow: hidden;
  color: #edf1f3;
  background: #182129;
  border: 1px solid #34424c;
  box-shadow: 0 18px 46px rgba(16,25,32,.17);
  isolation: isolate;
}
.journey-scene::before, .journey-scene::after { content:""; position:absolute; pointer-events:none; }
.journey-scene::before {
  z-index:-1; inset:0;
  background: radial-gradient(ellipse at 27% 61%, rgba(191,207,216,.15), transparent 41%), linear-gradient(116deg,rgba(255,255,255,.045),transparent 45%), repeating-linear-gradient(0deg,transparent 0 35px,rgba(212,223,229,.035) 35px 36px);
}
.journey-scene::after { left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg,transparent,#afbdc5 23%,#e2e8eb 49%,#84949e 78%,transparent); transform-origin:left; }
.screen-enter-next .journey-scene::after, .screen-enter-back .journey-scene::after { animation: scene-rule-in var(--motion-scene) var(--motion-mechanical) both; }
.journey-art { position:relative; display:grid; min-height:252px; place-items:center; overflow:hidden; color:#bac7ce; background:radial-gradient(ellipse at 52% 63%,rgba(162,177,186,.16),transparent 53%),linear-gradient(90deg,rgba(7,12,16,.25),transparent); border-right:1px solid rgba(204,216,223,.13); }
.journey-art::before { content:""; position:absolute; inset:10% 6%; border:1px solid rgba(205,216,223,.09); background:repeating-linear-gradient(0deg,transparent 0 19px,rgba(214,225,231,.045) 19px 20px),repeating-linear-gradient(90deg,transparent 0 19px,rgba(214,225,231,.045) 19px 20px); clip-path:polygon(4% 0,100% 0,96% 100%,0 100%); }
.journey-art svg { position:relative; z-index:1; width:min(92%,460px); height:auto; overflow:visible; filter:drop-shadow(0 9px 18px rgba(0,0,0,.25)); }
.screen-enter-next .journey-art svg { animation: scene-art-arrive var(--motion-reveal) var(--motion-mechanical) both; }
.screen-enter-back .journey-art svg { animation: scene-art-arrive var(--motion-reveal) var(--motion-mechanical) both; }
.journey-art svg g { stroke-width:1.35; }
.scene-axis { position:absolute; z-index:1; top:12%; bottom:12%; left:50%; width:1px; background:linear-gradient(transparent,rgba(226,234,238,.34),transparent); }
.scene-coordinate { position:absolute; z-index:2; color:#a7b4bc; font-size:8px; font-weight:800; letter-spacing:.14em; }
.scene-coordinate-a { top:16px; left:18px; }.scene-coordinate-b { right:17px; bottom:14px; }
.journey-scene-copy { display:flex; min-width:0; flex-direction:column; align-items:flex-start; justify-content:center; padding:26px clamp(24px,4vw,55px); }
.scene-kicker { margin:0 0 11px; color:#bdc9cf; font-size:9px; font-weight:850; letter-spacing:.17em; }
.journey-scene-copy h3 { max-width:460px; margin:0; color:#fff; font-size:clamp(24px,3vw,39px); line-height:1.02; letter-spacing:-.045em; }
.journey-scene-copy > p:not(.scene-kicker) { max-width:440px; margin:11px 0 20px; color:#bac5cb; font-size:12px; line-height:1.55; }
.scene-selection { display:grid; width:min(100%,470px); gap:5px; padding:10px 12px; color:#e7ecef; background:rgba(230,237,241,.055); border-left:2px solid #9baab2; }
.scene-selection span { color:#9eacb4; font-size:8px; font-weight:850; letter-spacing:.15em; }
.scene-selection strong { overflow:hidden; color:#f5f7f8; font-size:11px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.scene-sequence { display:flex; width:min(100%,470px); gap:5px; margin-top:18px; }
.scene-sequence i { flex:1; height:2px; background:rgba(224,232,236,.19); }
.scene-sequence i.is-done { background:#7c8b94; }.scene-sequence i.is-current { background:#e5ebee; box-shadow:0 0 9px rgba(225,233,237,.42); }
.journey-scene.scene-step-1 { grid-template-columns:minmax(300px,1.14fr) minmax(280px,.86fr); }
.journey-scene.scene-step-1 .journey-art { order:2; border-right:0; border-left:1px solid rgba(204,216,223,.13); }
.journey-scene.scene-step-2 .journey-art, .journey-scene.scene-step-4 .journey-art { color:#d2dbe0; }
.journey-scene.scene-step-3 { grid-template-columns:minmax(220px,.72fr) minmax(330px,1.28fr); min-height:238px; }
.journey-scene.scene-step-3 .journey-art { min-height:220px; }
.journey-scene.scene-step-5 .journey-art { order:2; border-right:0; border-left:1px solid rgba(204,216,223,.13); }
.journey-scene.scene-step-6 { grid-template-columns:minmax(330px,1.18fr) minmax(270px,.82fr); }
.journey-scene.scene-step-7 { grid-template-columns:minmax(280px,.86fr) minmax(340px,1.14fr); min-height:300px; border-color:#26343d; }
.journey-scene.scene-step-7 .journey-art { min-height:280px; color:#d9e1e5; }
.journey-scene.scene-step-7 .journey-scene-copy { padding-top:34px; padding-bottom:34px; }
.scene-measure, .scene-route, .scene-scan { fill:none; stroke:#e2e8eb; stroke-width:1; opacity:.65; stroke-dasharray:5 5; }
.scene-route { stroke-dasharray:110; }
.screen-enter-next .scene-route, .screen-enter-back .scene-route { animation: scene-route-draw .48s var(--motion-mechanical) both; }
.screen-enter-next .scene-scan, .screen-enter-back .scene-scan { animation: scene-scan-once .48s ease-out both; }
.is-build-sheet + .final-form { border-top:0; }
.is-build-sheet ~ .summary { border-top:2px solid #35434c; }
.auto-hero { min-height:430px; max-width:none; margin-bottom:29px; grid-template-columns:minmax(310px,.82fr) minmax(430px,1.18fr); border-radius:4px; box-shadow:0 24px 55px rgba(14,22,28,.22); }
.hero-scene { min-height:420px; background:radial-gradient(ellipse at 57% 63%,rgba(175,191,200,.22),transparent 55%),linear-gradient(180deg,transparent 63%,rgba(5,9,12,.56)); }
.hero-car { width:min(100%,660px); margin-top:32px; }
.auto-hero-copy { padding-left:clamp(26px,5vw,62px); }
.auto-hero h3 { max-width:430px; font-size:clamp(32px,4.1vw,54px); }
.auto-hero-copy p { max-width:390px; font-size:13px; }
.hero-coordinate, .hero-spec { font-size:9px; }
.hero-scene::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 35%,rgba(226,235,239,.055) 49%,transparent 64%); transform:translateX(-100%); }
html.pn-motion-intro .hero-scene::after { animation: hero-light-pass 1.1s .15s var(--motion-mechanical) both; }
.hero-cta { min-height:48px; padding-inline:17px; }
.journey-scene + .screen-lead { margin-top:0; }
.journey-scene ~ .final-form { max-width:none; }
.is-build-sheet ~ .summary { max-width:none; }
#screen[data-scene-step="0"] .target-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; }
#screen[data-scene-step="1"] .car-manufacturer-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
#screen[data-scene-step="2"] .car-series-fields { max-width:none; grid-template-columns:repeat(3,minmax(0,1fr)); background:linear-gradient(135deg,#f6f8f9,#eef2f4); }
#screen[data-scene-step="3"] .powertrain-visual { max-width:none; grid-template-columns:minmax(240px,.72fr) minmax(0,1fr); min-height:204px; }
#screen[data-scene-step="3"] .car-technical-fields { max-width:none; }
#screen[data-scene-step="4"] .car-workbench { max-width:none; grid-template-columns:170px minmax(0,1fr); }
#screen[data-scene-step="4"] .card-grid { grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none; }
#screen[data-scene-step="4"] .select-card { min-height:126px; border-top:2px solid #65747e; }
#screen[data-scene-step="5"] .car-catalog-note { max-width:none; padding:20px clamp(18px,4vw,38px); background:#202b34; border:1px solid #36444e; border-left:3px solid #98a7b0; color:#e8edf0; }
#screen[data-scene-step="5"] .car-catalog-note h3 { margin-top:8px; color:#fff; font-size:clamp(19px,2.3vw,27px); }
#screen[data-scene-step="5"] .car-catalog-note p { max-width:760px; color:#c3cdd2; }
#screen[data-scene-step="5"] .car-catalog-note .catalog-mark { color:#c7d1d6; }
#screen[data-scene-step="6"] .car-extra-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; }
#screen[data-scene-step="6"] .shipping-scene { max-width:none; min-height:102px; grid-template-columns:minmax(210px,.75fr) minmax(0,1fr); padding:17px 22px; }
#screen[data-scene-step="7"] { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); align-items:start; gap:16px; }
#screen[data-scene-step="7"] > .journey-scene, #screen[data-scene-step="7"] > .draft-toggle { grid-column:1/-1; }
#screen[data-scene-step="7"] > .final-form, #screen[data-scene-step="7"] > .summary { min-width:0; margin:0; }
#screen[data-scene-step="7"] .field-grid, #screen[data-scene-step="7"] .contact-options { grid-template-columns:1fr; }
@keyframes scene-art-arrive { from { opacity:.35; transform:translateY(10px) scale(.965); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes scene-rule-in { from { transform:scaleX(.25); opacity:.3; } to { transform:scaleX(1); opacity:1; } }
@keyframes scene-route-draw { from { stroke-dashoffset:110; opacity:.2; } to { stroke-dashoffset:0; opacity:.7; } }
@keyframes scene-scan-once { from { opacity:0; transform:translateX(-20px); } 35% { opacity:.65; } to { opacity:0; transform:translateX(20px); } }
@keyframes hero-light-pass { to { transform:translateX(100%); } }
@media (max-width: 980px) {
  .app-shell { width:100%; min-height:100vh; margin:0; border-radius:0; }
  .journey-scene { grid-template-columns:minmax(220px,.88fr) minmax(280px,1.12fr); min-height:245px; }
  .journey-art { min-height:230px; }
  .journey-scene-copy { padding:21px 25px; }
  .auto-hero { min-height:380px; grid-template-columns:minmax(280px,.88fr) minmax(350px,1.12fr); }
  .hero-scene { min-height:370px; }
  #screen[data-scene-step="1"] .car-manufacturer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #screen[data-scene-step="4"] .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #screen[data-scene-step="7"] { grid-template-columns:1fr; }
}
@media (max-width: 700px) {
  .journey-scene, .journey-scene.scene-step-1, .journey-scene.scene-step-3, .journey-scene.scene-step-5, .journey-scene.scene-step-6, .journey-scene.scene-step-7 { grid-template-columns:1fr; min-height:0; }
  .journey-art, .journey-scene.scene-step-1 .journey-art, .journey-scene.scene-step-5 .journey-art { order:0; min-height:174px; height:174px; border:0; border-bottom:1px solid rgba(204,216,223,.13); }
  .journey-art svg { width:min(78%,360px); max-height:155px; }
  .journey-scene-copy { padding:18px 19px 19px; }
  .scene-kicker { margin-bottom:7px; }
  .journey-scene-copy h3 { font-size:26px; }
  .journey-scene-copy > p:not(.scene-kicker) { margin:7px 0 12px; }
  .scene-sequence { margin-top:12px; }
  .journey-scene.scene-step-7 .journey-scene-copy { padding:20px; }
  .auto-hero { min-height:0; grid-template-columns:1fr; }
  .auto-hero-copy { min-height:240px; padding:26px 22px 20px; }
  .auto-hero h3 { font-size:clamp(34px,10vw,46px); }
  .hero-scene { min-height:220px; }
  .hero-car { width:min(96%,520px); margin:5px auto 15px; }
  .hero-spec { left:13px; }
  .screen { padding-top:15px; }
  #screen[data-scene-step="0"] .target-grid { grid-template-columns:1fr; }
  #screen[data-scene-step="1"] .car-manufacturer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #screen[data-scene-step="2"] .car-series-fields, #screen[data-scene-step="3"] .car-technical-fields { grid-template-columns:1fr; }
  #screen[data-scene-step="3"] .powertrain-visual { grid-template-columns:1fr; }
  #screen[data-scene-step="4"] .card-grid, #screen[data-scene-step="6"] .car-extra-grid { grid-template-columns:1fr; }
  #screen[data-scene-step="6"] .shipping-scene { grid-template-columns:1fr; }
  #screen[data-scene-step="7"] { grid-template-columns:1fr; }
}
@media (max-width: 420px) {
  .journey-scene { margin-bottom:19px; }
  .journey-art, .journey-scene.scene-step-1 .journey-art, .journey-scene.scene-step-5 .journey-art { min-height:150px; height:150px; }
  .journey-art svg { width:min(76%,310px); max-height:132px; }
  .journey-scene-copy { padding:16px; }
  .journey-scene-copy h3 { font-size:24px; }
  .scene-selection { padding:8px 10px; }
  .auto-hero-copy { min-height:225px; padding:22px 17px 17px; }
  .hero-scene { min-height:170px; }
  .hero-coordinate { right:12px; }
}
@media (max-width: 560px) {
  html.embed-mode .topbar { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:8px; }
  html.embed-mode .topbar::before { flex-basis:auto; width:136px; height:29px; }
  html.embed-mode .topbar > div:first-child { min-width:0; }
  html.embed-mode .topbar h2 { max-width:100%; font-size:24px; overflow-wrap:anywhere; }
  html.embed-mode .journey-progress { width:100%; margin-left:0; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-scene::after, .journey-art svg, .scene-route, .scene-scan, .hero-scene::after { animation:none !important; }
  .journey-scene::after, .hero-scene::after { transform:none; }
}

/* Cinematic atelier pass: finite light, contour and depth cues; never a looping backdrop. */
:root {
  --motion-step: 620ms;
  --motion-scene: 620ms;
  --motion-reveal: 470ms;
  --motion-stagger: 95ms;
  --motion-mechanical: cubic-bezier(.17,.82,.2,1);
}
.auto-hero {
  position:relative;
  min-height:clamp(455px,52vw,680px);
  grid-template-columns:minmax(320px,.78fr) minmax(480px,1.22fr);
  background:#11181d;
  border-color:#3a474f;
  box-shadow:0 32px 82px rgba(6,11,15,.34), inset 0 1px rgba(237,242,245,.08);
}
.auto-hero::before {
  background:linear-gradient(112deg,rgba(235,241,244,.075),transparent 34%,rgba(155,170,180,.035) 67%,transparent),repeating-linear-gradient(0deg,transparent 0 42px,rgba(214,224,230,.035) 42px 43px);
}
.auto-hero-copy { z-index:3; padding-right:clamp(20px,3vw,48px); }
.auto-hero-copy > * { opacity:1; }
html.pn-motion-intro .auto-hero-copy > * { animation:hero-copy-reveal .58s var(--motion-mechanical) both; }
html.pn-motion-intro .auto-hero-copy > *:nth-child(2) { animation-delay:90ms; }
html.pn-motion-intro .auto-hero-copy > *:nth-child(3) { animation-delay:180ms; }
html.pn-motion-intro .auto-hero-copy > *:nth-child(4) { animation-delay:280ms; }
.auto-hero h3 { text-wrap:balance; }
.hero-scene {
  min-height:100%;
  perspective:900px;
  background:radial-gradient(ellipse at 55% 59%,rgba(190,203,211,.26),transparent 45%),radial-gradient(ellipse at 76% 22%,rgba(127,145,156,.13),transparent 42%),linear-gradient(180deg,rgba(10,15,19,.04),rgba(5,9,12,.66));
}
.hero-scene::before {
  left:0; right:0; bottom:22%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(218,227,232,.58) 23%,rgba(218,227,232,.1) 80%,transparent);
}
.hero-scene::after {
  background:linear-gradient(108deg,transparent 24%,rgba(220,230,235,.035) 39%,rgba(238,244,247,.21) 49%,rgba(220,230,235,.045) 55%,transparent 72%);
  filter:blur(2px);
}
.hero-depth-line { position:absolute; z-index:0; height:1px; pointer-events:none; opacity:.42; transform-origin:left; background:linear-gradient(90deg,rgba(208,220,227,.5),transparent); }
.hero-depth-line-a { width:48%; left:2%; top:31%; transform:rotate(13deg); }
.hero-depth-line-b { width:52%; right:1%; top:76%; transform:rotate(-12deg); }
.hero-car { z-index:1; width:min(108%,760px); margin-top:42px; filter:drop-shadow(0 25px 24px rgba(0,0,0,.52)); transform-origin:54% 70%; }
.hero-car .car-body { fill:url(#pn-car-metal); }
.hero-car .car-contour { fill:none; stroke:#e0e7eb; stroke-width:1.35; opacity:.24; stroke-dasharray:1; stroke-dashoffset:0; }
.hero-car .car-wheel-spoke { fill:none; stroke:#d2dbe0; stroke-width:1; opacity:.72; transform-box:fill-box; transform-origin:center; }
html.pn-motion-intro .hero-car { animation:cinematic-car-arrive .96s var(--motion-mechanical) both; }
html.pn-motion-intro .hero-car .car-contour { animation:contour-build 1.05s .18s var(--motion-mechanical) both; }
html.pn-motion-intro .hero-car .car-wheel-spoke { animation:wheel-lock .8s .08s ease-out both; }
html.pn-motion-intro .hero-depth-line { animation:depth-line-reveal .88s .1s var(--motion-mechanical) both; }
html.pn-motion-intro .hero-scan { animation:hero-scan 1.3s .08s ease-out both; }
.hero-cta { position:relative; overflow:hidden; box-shadow:0 8px 22px rgba(0,0,0,.24); }
.hero-cta::after { content:""; position:absolute; inset:0 auto 0 -45%; width:35%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent); transform:skewX(-18deg); }
.hero-cta:hover::after { animation:cta-light-pass .52s ease-out both; }

.journey-scene {
  min-height:clamp(310px,31vw,410px);
  background:radial-gradient(ellipse at 19% 49%,rgba(189,204,213,.095),transparent 34%),linear-gradient(115deg,#11191e 0%,#1a252d 49%,#11191e 100%);
  border-color:#43515a;
  box-shadow:0 28px 66px rgba(14,22,28,.24),inset 0 1px rgba(240,244,246,.07);
}
.journey-scene::before {
  z-index:0;
  background:linear-gradient(128deg,rgba(236,242,245,.055),transparent 29%,rgba(164,179,188,.04) 65%,transparent),repeating-linear-gradient(0deg,transparent 0 32px,rgba(215,225,230,.04) 32px 33px),repeating-linear-gradient(90deg,transparent 0 54px,rgba(215,225,230,.025) 54px 55px);
}
.journey-scene::after { z-index:4; height:3px; box-shadow:0 0 18px rgba(209,221,228,.22); }
.journey-art {
  z-index:1;
  min-height:290px;
  background:radial-gradient(ellipse at 52% 58%,rgba(176,193,202,.22),transparent 47%),linear-gradient(115deg,rgba(7,12,16,.4),rgba(29,41,49,.08) 53%,rgba(5,9,12,.4));
  border-color:rgba(220,229,234,.19);
}
.journey-art::before { inset:8% 5%; border-color:rgba(212,223,229,.13); background:repeating-linear-gradient(0deg,transparent 0 15px,rgba(214,225,231,.05) 15px 16px),repeating-linear-gradient(90deg,transparent 0 15px,rgba(214,225,231,.05) 15px 16px); }
.journey-art::after { content:""; position:absolute; z-index:1; inset:-20% auto -20% -40%; width:34%; pointer-events:none; opacity:0; transform:skewX(-16deg); background:linear-gradient(90deg,transparent,rgba(224,234,239,.18),rgba(224,234,239,.035),transparent); }
.screen-enter-next .journey-art::after, .screen-enter-back .journey-art::after { animation:scene-light-reveal 680ms 70ms var(--motion-mechanical) both; }
.journey-art svg { width:min(96%,510px); max-height:270px; filter:drop-shadow(0 16px 24px rgba(0,0,0,.38)); }
.journey-art svg g { stroke-width:1.6; }
.screen-enter-next .journey-art svg { animation:scene-art-depth-in var(--motion-reveal) 70ms var(--motion-mechanical) both; }
.screen-enter-back .journey-art svg { animation:scene-art-depth-back var(--motion-reveal) 70ms var(--motion-mechanical) both; }
.journey-scene-copy { position:relative; z-index:2; padding:clamp(25px,4.2vw,58px); }
.journey-scene-copy::before { content:""; position:absolute; z-index:-1; inset:13% 7% 13% 0; background:linear-gradient(90deg,rgba(13,20,25,.18),transparent); pointer-events:none; }
.screen-enter-next .journey-scene-copy > *, .screen-enter-back .journey-scene-copy > * { animation:scene-copy-arrive 440ms var(--motion-mechanical) both; }
.screen-enter-next .journey-scene-copy > *:nth-child(2), .screen-enter-back .journey-scene-copy > *:nth-child(2) { animation-delay:65ms; }
.screen-enter-next .journey-scene-copy > *:nth-child(3), .screen-enter-back .journey-scene-copy > *:nth-child(3) { animation-delay:125ms; }
.screen-enter-next .journey-scene-copy > *:nth-child(4), .screen-enter-back .journey-scene-copy > *:nth-child(4) { animation-delay:180ms; }
.screen-enter-next .journey-scene-copy > *:nth-child(5), .screen-enter-back .journey-scene-copy > *:nth-child(5) { animation-delay:230ms; }
.journey-scene-copy h3 { font-size:clamp(30px,4vw,52px); text-shadow:0 7px 28px rgba(0,0,0,.34); }
.scene-selection { background:linear-gradient(105deg,rgba(235,241,244,.1),rgba(235,241,244,.035)); border-left-width:3px; }
.scene-sequence { gap:4px; }
.scene-sequence i { height:3px; transition:background 280ms ease,box-shadow 280ms ease; }
.scene-sequence i.is-done { background:#91a0a9; }
.scene-sequence i.is-current { background:#eef2f4; box-shadow:0 0 12px rgba(229,237,241,.56); }
.journey-scene.scene-step-7 { min-height:370px; background:radial-gradient(ellipse at 77% 44%,rgba(187,202,211,.12),transparent 43%),linear-gradient(118deg,#11191e,#202b33 55%,#121a1f); }
.journey-scene.scene-step-7 .journey-art { background:radial-gradient(ellipse at 52% 50%,rgba(199,211,218,.24),transparent 48%),linear-gradient(135deg,#1c2931,#11191e); }
.journey-scene.scene-step-7 .scene-selection { border-left-color:#d8e1e5; }
.is-build-sheet ~ .summary { background:linear-gradient(145deg,#fff,#f3f6f7); box-shadow:0 18px 44px rgba(19,29,36,.11); }
.is-build-sheet ~ .final-form { box-shadow:0 18px 44px rgba(19,29,36,.08); }

@keyframes hero-copy-reveal { from { opacity:0; transform:translateY(20px); filter:blur(5px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes cinematic-car-arrive { 0% { opacity:.12; transform:translate3d(36px,18px,-45px) scale(.91); filter:brightness(.55) blur(5px); } 62% { opacity:1; filter:brightness(1.2) blur(0); } 100% { opacity:1; transform:translate3d(0,0,0) scale(1); filter:brightness(1) blur(0); } }
@keyframes contour-build { 0% { opacity:0; stroke-dashoffset:1; } 65% { opacity:.95; } 100% { opacity:.52; stroke-dashoffset:0; } }
@keyframes wheel-lock { from { transform:rotate(-130deg); } to { transform:rotate(0); } }
@keyframes depth-line-reveal { from { opacity:0; transform:scaleX(.12) rotate(13deg); } to { opacity:.42; transform:scaleX(1) rotate(13deg); } }
@keyframes cta-light-pass { to { transform:translateX(470%) skewX(-18deg); } }
@keyframes scene-light-reveal { 0% { opacity:0; transform:translateX(0) skewX(-16deg); } 30% { opacity:1; } 100% { opacity:0; transform:translateX(470%) skewX(-16deg); } }
@keyframes scene-art-depth-in { from { opacity:0; transform:translate3d(24px,10px,-50px) scale(.91); filter:blur(5px) drop-shadow(0 16px 24px rgba(0,0,0,.38)); } to { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0) drop-shadow(0 16px 24px rgba(0,0,0,.38)); } }
@keyframes scene-art-depth-back { from { opacity:0; transform:translate3d(-24px,10px,-50px) scale(.91); filter:blur(5px) drop-shadow(0 16px 24px rgba(0,0,0,.38)); } to { opacity:1; transform:translate3d(0,0,0) scale(1); filter:blur(0) drop-shadow(0 16px 24px rgba(0,0,0,.38)); } }
@keyframes scene-copy-arrive { from { opacity:0; transform:translateY(18px); filter:blur(3px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }

@media (max-width:980px) {
  .auto-hero { min-height:500px; grid-template-columns:minmax(280px,.78fr) minmax(380px,1.22fr); }
  .journey-scene { min-height:300px; }
}
@media (max-width:700px) {
  .auto-hero { min-height:0; grid-template-columns:1fr; }
  .auto-hero-copy { min-height:260px; }
  .hero-scene { min-height:260px; }
  .hero-car { width:min(108%,650px); margin-top:30px; }
  .journey-scene { min-height:0; }
  .journey-art, .journey-scene.scene-step-1 .journey-art, .journey-scene.scene-step-5 .journey-art { min-height:205px; height:205px; }
  .journey-art svg { width:min(90%,390px); max-height:180px; }
  .journey-scene-copy { padding:20px 22px 23px; }
}
@media (max-width:420px) {
  .auto-hero-copy { min-height:240px; }
  .hero-scene { min-height:208px; }
  .journey-art, .journey-scene.scene-step-1 .journey-art, .journey-scene.scene-step-5 .journey-art { min-height:174px; height:174px; }
  .journey-scene-copy h3 { font-size:27px; }
  .scene-coordinate { font-size:7px; }
}
@media (prefers-reduced-motion:reduce) {
  .auto-hero-copy > *, .hero-car, .hero-car .car-contour, .hero-car .car-wheel-spoke, .hero-depth-line,
  .hero-cta::after, .journey-art::after, .journey-scene-copy > *, .journey-art svg,
  .screen-enter-next .journey-art svg, .screen-enter-back .journey-art svg { animation:none !important; }
  .hero-car .car-contour { opacity:.52; stroke-dashoffset:0; }
  .hero-depth-line { opacity:.28; }
  .hero-cta:hover { transform:none; }
}