/* Kompakte Einstiegshilfe für Saldo- und S&OP-Importe */

.import-guide-modern {
  container-type: inline-size;
  padding: clamp(16px, 2.5vw, 28px);
  color: #ececef;
  background:
    linear-gradient(90deg, rgba(229, 115, 115, 0.055) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(rgba(229, 115, 115, 0.035) 1px, transparent 1px) 0 0 / 32px 32px,
    #202023;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
}

.import-guide-modern h3,
.import-guide-modern h4,
.import-guide-modern p,
.import-guide-modern ol,
.import-guide-modern ul {
  margin-top: 0;
}

.import-guide-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.import-guide-kicker,
.import-source-label,
.import-followup-label {
  margin-bottom: 6px;
  color: #ff8585;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.import-guide-intro h3 {
  margin-bottom: 7px;
  color: #fff;
  font-size: clamp(1.35rem, 3.2cqi, 2rem);
  line-height: 1.08;
}

.import-guide-intro p:last-child {
  max-width: 64ch;
  margin-bottom: 0;
  color: #bfc0c5;
  font-size: 0.88rem;
  line-height: 1.5;
}

.import-format-list {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.import-format-chip,
.import-source-format {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 5px 8px;
  color: #e6e6e8;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--font-family-system);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.05em;
}

.import-first-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 18px 0;
  list-style: none;
  counter-reset: none;
}

.import-first-steps > li {
  display: flex;
  min-width: 0;
  gap: 10px;
  padding: 4px 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

.import-first-steps > li:first-child {
  padding-left: 0;
}

.import-first-steps > li:last-child {
  padding-right: 0;
  border-right: 0;
}

.import-step-number {
  flex: 0 0 auto;
  color: #ff8585;
  font-family: var(--font-family-monospace);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
}

.import-first-steps strong,
.import-first-steps span:not(.import-step-number) {
  display: block;
}

.import-first-steps strong {
  margin-bottom: 4px;
  color: #fff;
  font-size: 0.88rem;
}

.import-first-steps span:not(.import-step-number) {
  color: #adaeb4;
  font-size: 0.78rem;
  line-height: 1.4;
}

.import-start-callout,
.import-reset-warning {
  position: relative;
  margin-bottom: 18px;
  border-left: 3px solid #ff8585;
  padding: 11px 13px;
  color: #e9e9eb;
  background: rgba(229, 115, 115, 0.1);
  font-size: 0.82rem;
  line-height: 1.45;
}

.import-start-callout strong,
.import-reset-warning strong {
  color: #fff;
}

.import-source-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: 14px;
}

.import-source {
  min-width: 0;
  border-top: 3px solid #ff7d7d;
  padding: 15px 16px 16px;
  background: rgba(255, 255, 255, 0.045);
}

.import-source--sop {
  border-top-color: #e3b25b;
}

.import-source--sop .import-source-label {
  color: #f0c578;
}

.import-source-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.import-source-heading h4,
.import-followup h4 {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.2;
}

.import-source > p:not(.import-reset-warning, .import-source-note),
.import-source-note {
  margin-bottom: 12px;
  color: #c7c8cc;
  font-size: 0.8rem;
  line-height: 1.5;
}

.import-source code,
.import-followup code,
.import-advanced-content code {
  overflow-wrap: anywhere;
  color: #fff0ce;
  font-family: var(--font-family-monospace);
  font-size: 0.76rem;
}

.import-check-list,
.import-source-steps,
.import-compact-list {
  color: #c8c9cd;
  font-size: 0.79rem;
  line-height: 1.48;
}

.import-check-list,
.import-compact-list {
  padding-left: 18px;
}

.import-check-list li + li,
.import-source-steps li + li,
.import-compact-list li + li {
  margin-top: 7px;
}

.import-check-list li::marker,
.import-compact-list li::marker {
  color: #ff8585;
}

.import-source-steps {
  margin-bottom: 12px;
  padding-left: 22px;
}

.import-source-steps li::marker {
  color: #f0c578;
  font-family: var(--font-family-monospace);
  font-weight: 700;
}

.import-reset-warning {
  margin: 14px 0;
  border-left-color: #f2bd5b;
  background: rgba(242, 189, 91, 0.11);
}

.import-advanced-details {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.import-advanced-details > summary {
  min-height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  color: #dedee1;
  font-size: 0.78rem;
  font-weight: 700;
}

.import-advanced-details > summary::-webkit-details-marker {
  display: none;
}

.import-advanced-details > summary::after {
  content: 'Details +';
  color: #ff9292;
  font-family: var(--font-family-system);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.import-advanced-details[open] > summary::after {
  content: 'Details −';
}

.import-advanced-details > summary:focus-visible {
  outline: 3px solid #75aaff;
  outline-offset: 2px;
}

.import-advanced-content {
  padding: 3px 0 10px;
}

.import-advanced-content p {
  margin-bottom: 10px;
  color: #bfc0c5;
  font-size: 0.77rem;
  line-height: 1.45;
}

.import-column-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.import-column-list code {
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 3px;
  padding: 4px 6px;
  color: #dddde1;
  background: rgba(0, 0, 0, 0.22);
  font-size: 0.68rem;
}

.import-column-list--sop {
  margin-bottom: 14px;
}

.import-column-list--sop code {
  border-color: rgba(240, 197, 120, 0.28);
  color: #ffe4b3;
}

.import-source-note {
  margin-bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
}

.import-followup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.import-followup {
  min-width: 0;
  padding: 18px 18px 0 0;
}

.import-followup + .import-followup {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-right: 0;
  padding-left: 18px;
}

.import-followup .import-compact-list {
  margin: 12px 0 0;
}

.import-followup strong {
  color: #f2f2f3;
}

@container (max-width: 700px) {
  .import-guide-intro {
    display: block;
  }

  .import-format-list {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .import-first-steps,
  .import-source-grid,
  .import-followup-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .import-first-steps {
    gap: 10px;
  }

  .import-first-steps > li,
  .import-first-steps > li:first-child,
  .import-first-steps > li:last-child {
    padding: 3px 0;
    border-right: 0;
  }

  .import-followup + .import-followup {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 0;
    padding-left: 0;
  }
}

@container (max-width: 390px) {
  .import-guide-modern {
    padding: 14px 12px;
  }

  .import-source {
    padding: 13px 12px;
  }

  .import-source-heading {
    display: block;
  }

  .import-source-format {
    display: inline-block;
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .import-guide-modern *,
  .import-guide-modern *::before,
  .import-guide-modern *::after {
    scroll-behavior: auto;
  }
}