/**
 * Schilcher Lieferanten-Portal
 *
 * Uses the design tokens of the Schilcher Customer Catalog plugin, which is
 * installed next to this plugin.
 */
@import url('../../../schilcher-customer-catalog/assets/css/schilcher-variables.css');

.scp-portal {
    font-family: var(--schilcher-font-family);
    color: var(--schilcher-text-primary);
    font-size: var(--schilcher-text-body);
    line-height: var(--schilcher-line-height-relaxed);
}

.scp-login {
    display: flex;
    justify-content: center;
    padding: var(--schilcher-space-3xl) var(--schilcher-space-md);
}

.scp-card {
    width: 100%;
    max-width: var(--schilcher-container-width-sm);
    padding: var(--schilcher-space-3xl);
    background: var(--schilcher-bg-primary);
    border: 1px solid var(--schilcher-border-color);
    border-radius: var(--schilcher-radius-lg);
    box-shadow: var(--schilcher-shadow-sm);
}

.scp-title {
    margin: 0 0 var(--schilcher-space-md);
    font-size: var(--schilcher-text-display);
    font-weight: var(--schilcher-font-weight-bold);
    line-height: var(--schilcher-line-height-tight);
    color: var(--schilcher-text-primary);
}

.scp-intro {
    margin: 0 0 var(--schilcher-space-xl);
    color: var(--schilcher-text-secondary);
}

.scp-notice {
    margin: 0 0 var(--schilcher-space-xl);
    padding: var(--schilcher-space-md) var(--schilcher-space-lg);
    border-radius: var(--schilcher-radius-md);
    border-left: 4px solid var(--schilcher-border-color-strong);
    background: var(--schilcher-bg-secondary);
}

.scp-notice--error {
    border-left-color: var(--schilcher-error);
}

.scp-form {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-sm);
}

.scp-label {
    font-weight: var(--schilcher-font-weight-semibold);
}

.scp-input {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--schilcher-input-height-lg);
    padding: var(--schilcher-space-sm) var(--schilcher-space-md);
    font: inherit;
    color: var(--schilcher-text-primary);
    background: var(--schilcher-bg-primary);
    border: 1px solid var(--schilcher-light-brown);
    border-radius: var(--schilcher-radius-md);
    transition: border-color var(--schilcher-transition-base), box-shadow var(--schilcher-transition-base);
}

.scp-help {
    margin: 0 0 var(--schilcher-space-sm);
    font-size: var(--schilcher-text-small);
    color: var(--schilcher-text-secondary);
}

.scp-login__forgot {
    margin: var(--schilcher-space-xl) 0 0;
}

.scp-input:focus {
    outline: none;
    border-color: var(--schilcher-border-color-strong);
    box-shadow: 0 0 0 3px rgba(135, 108, 75, 0.25);
}

.scp-button {
    align-self: flex-start;
    min-height: var(--schilcher-button-height-lg);
    margin-top: var(--schilcher-space-sm);
    padding: var(--schilcher-space-sm) var(--schilcher-space-xl);
    font: inherit;
    font-weight: var(--schilcher-font-weight-semibold);
    color: #ffffff;
    background: var(--schilcher-primary-text-brown);
    border: none;
    border-radius: var(--schilcher-radius-md);
    cursor: pointer;
    transition: background-color var(--schilcher-transition-base);
}

.scp-button:hover {
    background: var(--schilcher-warm-brown);
}

.scp-button:focus-visible {
    outline: 3px solid var(--schilcher-light-brown);
    outline-offset: 2px;
}

@media (max-width: 549px) {
    .scp-card {
        padding: var(--schilcher-space-xl);
    }

    .scp-button {
        align-self: stretch;
    }
}

/* Article list */

.scp-articles {
    max-width: var(--schilcher-container-width-xl);
    margin: 0 auto;
    padding: var(--schilcher-space-3xl) var(--schilcher-space-md);
}

.scp-articles__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--schilcher-space-md);
    margin-bottom: var(--schilcher-space-lg);
}

.scp-articles__supplier {
    margin: 0;
    font-weight: var(--schilcher-font-weight-semibold);
}

.scp-articles__number {
    font-weight: var(--schilcher-font-weight-normal);
    color: var(--schilcher-text-secondary);
}

.scp-articles__progress {
    margin: 0 0 var(--schilcher-space-xl);
    padding: var(--schilcher-space-md) var(--schilcher-space-lg);
    background: var(--schilcher-bg-secondary);
    border-radius: var(--schilcher-radius-md);
    font-weight: var(--schilcher-font-weight-semibold);
}

.scp-icon {
    flex-shrink: 0;
    width: var(--schilcher-icon-sm);
    height: var(--schilcher-icon-sm);
}

.scp-logout {
    display: inline-flex;
    align-items: center;
    gap: var(--schilcher-space-xs);
    min-height: var(--schilcher-button-height-md);
    padding: var(--schilcher-space-xs) var(--schilcher-space-md);
    color: var(--schilcher-text-primary);
    font-weight: var(--schilcher-font-weight-semibold);
    text-decoration: none;
    border: 1px solid var(--schilcher-light-brown);
    border-radius: var(--schilcher-radius-md);
    transition: background-color var(--schilcher-transition-base);
}

.scp-logout:hover {
    background: var(--schilcher-bg-tertiary);
}

.scp-logout:focus-visible,
.scp-action:focus-visible,
.scp-pagination__item:focus-visible {
    outline: 3px solid var(--schilcher-light-brown);
    outline-offset: 2px;
}

.scp-search {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-sm);
    margin-bottom: var(--schilcher-space-xl);
}

.scp-search__row {
    display: flex;
    gap: var(--schilcher-space-sm);
}

.scp-search__field {
    position: relative;
    flex: 1;
    max-width: var(--schilcher-container-width-sm);
}

.scp-search__icon {
    position: absolute;
    top: 50%;
    left: var(--schilcher-space-md);
    transform: translateY(-50%);
    color: var(--schilcher-text-secondary);
    pointer-events: none;
}

.scp-input.scp-search__input {
    padding-left: calc(var(--schilcher-space-md) * 2 + var(--schilcher-icon-sm));
}

.scp-button.scp-search__button {
    margin-top: 0;
}

.scp-search__result {
    margin: 0;
    color: var(--schilcher-text-secondary);
}

.scp-search__result a {
    margin-left: var(--schilcher-space-sm);
    color: var(--schilcher-text-primary);
    font-weight: var(--schilcher-font-weight-semibold);
}

.scp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--schilcher-bg-primary);
    border: 1px solid var(--schilcher-border-color);
    border-radius: var(--schilcher-radius-lg);
    overflow: hidden;
}

.scp-table th,
.scp-table td {
    padding: var(--schilcher-space-md);
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--schilcher-border-color);
}

.scp-table th {
    background: var(--schilcher-bg-tertiary);
    font-weight: var(--schilcher-font-weight-bold);
}

.scp-table tbody tr:last-child td {
    border-bottom: none;
}

.scp-table__comment {
    margin: var(--schilcher-space-xs) 0 0;
    padding: var(--schilcher-space-xs) var(--schilcher-space-sm);
    font-size: var(--schilcher-text-small);
    border-left: 3px solid var(--schilcher-error);
    background: var(--schilcher-bg-secondary);
    border-radius: var(--schilcher-radius-sm);
}

.scp-table__action {
    text-align: right;
    white-space: nowrap;
}

.scp-status {
    display: inline-block;
    padding: 2px var(--schilcher-space-sm);
    font-size: var(--schilcher-text-small);
    font-weight: var(--schilcher-font-weight-semibold);
    white-space: nowrap;
    border-radius: var(--schilcher-radius-full);
    border: 1px solid var(--schilcher-light-brown);
    background: var(--schilcher-bg-primary);
}

.scp-status--entwurf {
    background: var(--schilcher-bg-secondary);
}

.scp-status--in_pruefung {
    border-color: var(--schilcher-info);
    color: var(--schilcher-info);
}

.scp-status--zurueckgegeben {
    border-color: var(--schilcher-error);
    color: var(--schilcher-error);
}

.scp-status--freigegeben {
    border-color: var(--schilcher-success);
    color: var(--schilcher-success);
}

.scp-action {
    display: inline-block;
    padding: var(--schilcher-space-xs) var(--schilcher-space-md);
    color: #ffffff;
    font-weight: var(--schilcher-font-weight-semibold);
    text-decoration: none;
    background: var(--schilcher-primary-text-brown);
    border-radius: var(--schilcher-radius-md);
    transition: background-color var(--schilcher-transition-base);
}

.scp-action:hover {
    color: #ffffff;
    background: var(--schilcher-warm-brown);
}

.scp-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--schilcher-space-xs);
    margin-top: var(--schilcher-space-xl);
}

.scp-pagination__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--schilcher-button-height-md);
    min-height: var(--schilcher-button-height-md);
    color: var(--schilcher-text-primary);
    text-decoration: none;
    border: 1px solid var(--schilcher-light-brown);
    border-radius: var(--schilcher-radius-md);
}

.scp-pagination__item:hover {
    background: var(--schilcher-bg-tertiary);
}

.scp-pagination__item--current {
    color: #ffffff;
    background: var(--schilcher-primary-text-brown);
    border-color: var(--schilcher-primary-text-brown);
}

.scp-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    .scp-table,
    .scp-table tbody,
    .scp-table tr,
    .scp-table td {
        display: block;
    }

    .scp-table thead {
        display: none;
    }

    .scp-table tr {
        padding: var(--schilcher-space-sm) 0;
        border-bottom: 1px solid var(--schilcher-border-color);
    }

    .scp-table td {
        padding: var(--schilcher-space-xs) var(--schilcher-space-md);
        border-bottom: none;
    }

    .scp-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: var(--schilcher-text-small);
        color: var(--schilcher-text-secondary);
    }

    .scp-table__action {
        text-align: left;
    }

    .scp-search__row {
        flex-direction: column;
    }

    .scp-search__field {
        max-width: none;
    }

    .scp-button.scp-search__button {
        align-self: stretch;
    }
}

/* Packaging form */

.scp-packaging {
    max-width: var(--schilcher-container-width-lg);
    margin: 0 auto;
    padding: var(--schilcher-space-3xl) var(--schilcher-space-md);
}

.scp-packaging [hidden] {
    display: none !important;
}

.scp-back {
    display: inline-flex;
    align-items: center;
    gap: var(--schilcher-space-xs);
    margin-bottom: var(--schilcher-space-sm);
    color: var(--schilcher-text-secondary);
    font-weight: var(--schilcher-font-weight-semibold);
    text-decoration: none;
}

.scp-back:hover {
    color: var(--schilcher-text-primary);
}

.scp-back:focus-visible,
.scp-link-button:focus-visible,
.scp-choice input:focus-visible {
    outline: 3px solid var(--schilcher-light-brown);
    outline-offset: 2px;
}

.scp-save-status {
    position: sticky;
    top: 0;
    z-index: var(--schilcher-z-sticky);
    margin: 0 0 var(--schilcher-space-xl);
    padding: var(--schilcher-space-sm) var(--schilcher-space-lg);
    font-size: var(--schilcher-text-small);
    color: var(--schilcher-text-secondary);
    background: var(--schilcher-bg-secondary);
    border-radius: var(--schilcher-radius-md);
}

.scp-save-status--error {
    color: var(--schilcher-error);
    border-left: 4px solid var(--schilcher-error);
    font-weight: var(--schilcher-font-weight-semibold);
}

.scp-packaging__fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.scp-block {
    margin-bottom: var(--schilcher-space-xl);
    padding: var(--schilcher-space-xl);
    background: var(--schilcher-bg-primary);
    border: 1px solid var(--schilcher-border-color);
    border-radius: var(--schilcher-radius-lg);
    box-shadow: var(--schilcher-shadow-sm);
}

.scp-block__title {
    margin: 0 0 var(--schilcher-space-sm);
    font-size: var(--schilcher-text-heading);
    font-weight: var(--schilcher-font-weight-bold);
    line-height: var(--schilcher-line-height-tight);
}

.scp-block__note {
    margin: 0 0 var(--schilcher-space-lg);
    color: var(--schilcher-text-secondary);
    font-size: var(--schilcher-text-small);
}

.scp-erp {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--schilcher-space-md) var(--schilcher-space-xl);
    margin: 0;
}

.scp-erp dt {
    font-size: var(--schilcher-text-small);
    color: var(--schilcher-text-secondary);
}

.scp-erp dd {
    margin: 0;
    font-weight: var(--schilcher-font-weight-semibold);
    overflow-wrap: anywhere;
}

.scp-field {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-xs);
    margin-bottom: var(--schilcher-space-md);
}

.scp-field__error {
    margin: 0;
    font-size: var(--schilcher-text-small);
    color: var(--schilcher-error);
}

.scp-input[aria-invalid="true"] {
    border-color: var(--schilcher-error);
}

.scp-textarea {
    min-height: calc(var(--schilcher-input-height-lg) * 2);
    resize: vertical;
}

.scp-input:disabled {
    color: var(--schilcher-text-primary);
    background: var(--schilcher-bg-secondary);
    cursor: default;
}

.scp-level + .scp-level {
    margin-top: var(--schilcher-space-xl);
    padding-top: var(--schilcher-space-xl);
    border-top: 1px solid var(--schilcher-border-color);
}

.scp-level__title {
    margin: 0 0 var(--schilcher-space-md);
    font-size: var(--schilcher-font-size-lg);
    font-weight: var(--schilcher-font-weight-bold);
}

.scp-components {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-md);
    margin: 0 0 var(--schilcher-space-md);
    padding: 0;
    list-style: none;
}

.scp-component {
    padding: var(--schilcher-space-lg);
    background: var(--schilcher-cream);
    border: 1px solid var(--schilcher-border-color);
    border-radius: var(--schilcher-radius-md);
}

.scp-component[data-suggestion="1"] {
    border-style: dashed;
    border-color: var(--schilcher-warm-brown);
}

.scp-component__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--schilcher-space-sm);
    min-height: var(--schilcher-button-height-sm);
    margin-bottom: var(--schilcher-space-sm);
}

.scp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--schilcher-space-xs);
    padding: 2px var(--schilcher-space-sm);
    font-size: var(--schilcher-text-small);
    font-weight: var(--schilcher-font-weight-semibold);
    color: var(--schilcher-primary-text-brown);
    background: var(--schilcher-primary-teal);
    border: 1px solid var(--schilcher-warm-brown);
    border-radius: var(--schilcher-radius-full);
}

.scp-link-button {
    display: inline-flex;
    align-items: center;
    gap: var(--schilcher-space-xs);
    margin-left: auto;
    padding: var(--schilcher-space-xs) var(--schilcher-space-sm);
    font: inherit;
    font-size: var(--schilcher-text-small);
    font-weight: var(--schilcher-font-weight-semibold);
    color: var(--schilcher-text-secondary);
    background: none;
    border: none;
    border-radius: var(--schilcher-radius-sm);
    cursor: pointer;
}

.scp-link-button:hover {
    color: var(--schilcher-error);
}

.scp-component__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.6fr);
    gap: 0 var(--schilcher-space-md);
}

.scp-unit-input {
    display: flex;
    align-items: center;
    gap: var(--schilcher-space-xs);
}

.scp-unit-input__unit {
    font-weight: var(--schilcher-font-weight-semibold);
    color: var(--schilcher-text-secondary);
}

.scp-component__questions {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-sm);
}

.scp-pfas-limits {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-sm);
    padding-left: var(--schilcher-space-lg);
    border-left: 3px solid var(--schilcher-light-brown);
}

.scp-question {
    margin: 0 0 var(--schilcher-space-sm);
    padding: 0;
    border: 0;
    min-width: 0;
}

.scp-question__legend {
    margin-bottom: var(--schilcher-space-xs);
    padding: 0;
    font-weight: var(--schilcher-font-weight-semibold);
}

.scp-question__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--schilcher-space-xs) var(--schilcher-space-lg);
}

.scp-choice {
    display: inline-flex;
    align-items: center;
    gap: var(--schilcher-space-xs);
    min-height: var(--schilcher-button-height-sm);
    cursor: pointer;
}

.scp-button.scp-button--secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--schilcher-space-xs);
    margin-top: 0;
    color: var(--schilcher-primary-text-brown);
    background: var(--schilcher-bg-primary);
    border: 1px solid var(--schilcher-warm-brown);
}

.scp-button.scp-button--secondary:hover {
    background: var(--schilcher-bg-tertiary);
}

.scp-question + .scp-level {
    margin-top: var(--schilcher-space-xl);
    padding-top: var(--schilcher-space-xl);
    border-top: 1px solid var(--schilcher-border-color);
}

.scp-supplier-documents {
    margin-top: var(--schilcher-space-2xl);
}

.scp-upload {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
    gap: 0 var(--schilcher-space-md);
    align-items: start;
}

.scp-upload .scp-button.scp-upload__submit {
    margin-top: calc(var(--schilcher-text-body) * 1.6 + var(--schilcher-space-xs));
}

.scp-upload .scp-upload__hint {
    margin: 0;
}

.scp-upload__status {
    margin: 0 0 var(--schilcher-space-md);
    font-size: var(--schilcher-text-small);
    color: var(--schilcher-text-secondary);
}

.scp-upload__status:empty {
    display: none;
}

.scp-upload__status--error {
    color: var(--schilcher-error);
    font-weight: var(--schilcher-font-weight-semibold);
}

.scp-document-list {
    display: flex;
    flex-direction: column;
    gap: var(--schilcher-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.scp-document {
    display: flex;
    align-items: flex-start;
    gap: var(--schilcher-space-sm);
    padding: var(--schilcher-space-md);
    background: var(--schilcher-cream);
    border: 1px solid var(--schilcher-border-color);
    border-radius: var(--schilcher-radius-md);
}

.scp-document__icon {
    flex-shrink: 0;
    margin-top: 4px;
    color: var(--schilcher-warm-brown);
}

.scp-document__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.scp-document__type {
    font-size: var(--schilcher-text-small);
    font-weight: var(--schilcher-font-weight-semibold);
    color: var(--schilcher-text-secondary);
}

.scp-document__name {
    font-weight: var(--schilcher-font-weight-semibold);
    color: var(--schilcher-primary-text-brown);
    overflow-wrap: anywhere;
}

.scp-document__name:hover {
    color: var(--schilcher-warm-brown);
}

.scp-document__name:focus-visible {
    outline: 3px solid var(--schilcher-light-brown);
    outline-offset: 2px;
}

.scp-document__meta {
    font-size: var(--schilcher-text-small);
    color: var(--schilcher-text-secondary);
}

.scp-document__hash {
    font-size: var(--schilcher-text-small);
    color: var(--schilcher-text-secondary);
    overflow-wrap: anywhere;
}

.scp-confirmation {
    margin-top: var(--schilcher-space-xl);
    padding-top: var(--schilcher-space-xl);
    border-top: 1px solid var(--schilcher-border-color);
}

.scp-confirmation__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 var(--schilcher-space-md);
}

.scp-choice.scp-confirmation__statement {
    display: flex;
    align-items: flex-start;
    margin: 0 0 var(--schilcher-space-lg);
    font-weight: var(--schilcher-font-weight-semibold);
}

.scp-confirmation__statement input {
    margin-top: 0.3em;
}

.scp-submit-messages__title {
    margin: 0;
    font-weight: var(--schilcher-font-weight-semibold);
}

.scp-submit-messages__list {
    margin: var(--schilcher-space-xs) 0 0;
    padding-left: var(--schilcher-space-lg);
}

.scp-submit-messages__list:empty {
    display: none;
}

.scp-confirmation__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--schilcher-space-md);
}

.scp-confirmation__actions .scp-button {
    margin-top: 0;
}

.scp-confirmation__signature {
    grid-column: 1 / -1;
}

.scp-confirmation__signature code {
    overflow-wrap: anywhere;
    font-size: var(--schilcher-text-small);
}

@media (max-width: 767px) {
    .scp-block {
        padding: var(--schilcher-space-lg);
    }

    .scp-component__grid,
    .scp-confirmation__fields,
    .scp-upload {
        grid-template-columns: minmax(0, 1fr);
    }

    .scp-upload .scp-button.scp-upload__submit {
        margin-top: 0;
        margin-bottom: var(--schilcher-space-md);
    }

    .scp-pfas-limits {
        padding-left: var(--schilcher-space-md);
    }
}

/* Guidance on the article list: intro box, steps, progress, status legend, FAQ */

.scp-guide {
    margin: 0 0 var(--schilcher-space-xl);
    background: var(--schilcher-primary-teal);
    border: 1px solid var(--schilcher-border-color);
    border-left: 4px solid var(--schilcher-warm-brown);
    border-radius: var(--schilcher-radius-md);
}

.scp-guide__summary,
.scp-faq__question {
    display: flex;
    align-items: center;
    gap: var(--schilcher-space-sm);
    min-height: var(--schilcher-button-height-md);
    font-weight: var(--schilcher-font-weight-bold);
    cursor: pointer;
    list-style: none;
}

.scp-guide__summary::-webkit-details-marker,
.scp-faq__question::-webkit-details-marker {
    display: none;
}

/* Chevron that points down while open, so the state is not shown by color alone. */
.scp-guide__summary::before,
.scp-faq__question::before {
    content: "";
    flex-shrink: 0;
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--schilcher-transition-fast);
}

details[open] > .scp-guide__summary::before,
details[open] > .scp-faq__question::before {
    transform: rotate(45deg);
}

.scp-guide__summary {
    padding: var(--schilcher-space-sm) var(--schilcher-space-lg);
    font-size: var(--schilcher-font-size-lg);
}

.scp-guide__summary:focus-visible,
.scp-faq__question:focus-visible {
    outline: 3px solid var(--schilcher-light-brown);
    outline-offset: 2px;
}

.scp-guide__body {
    padding: 0 var(--schilcher-space-lg) var(--schilcher-space-md);
}

.scp-guide__body p {
    margin: 0 0 var(--schilcher-space-sm);
}

.scp-steps-block {
    margin: 0 0 var(--schilcher-space-xl);
}

.scp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--schilcher-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: scp-step;
}

.scp-steps__item {
    position: relative;
    padding: var(--schilcher-space-md) var(--schilcher-space-md) var(--schilcher-space-md) calc(var(--schilcher-space-md) * 2 + 2rem);
    font-size: var(--schilcher-text-small);
    background: var(--schilcher-bg-primary);
    border: 1px solid var(--schilcher-border-color);
    border-radius: var(--schilcher-radius-md);
    counter-increment: scp-step;
}

.scp-steps__item::before {
    content: counter(scp-step);
    position: absolute;
    top: var(--schilcher-space-md);
    left: var(--schilcher-space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    font-size: var(--schilcher-text-body);
    font-weight: var(--schilcher-font-weight-bold);
    color: #ffffff;
    background: var(--schilcher-primary-text-brown);
    border-radius: var(--schilcher-radius-full);
}

.scp-steps__title {
    display: block;
    font-size: var(--schilcher-text-body);
}

.scp-articles__remaining {
    display: block;
    margin-top: var(--schilcher-space-xs);
    font-weight: var(--schilcher-font-weight-normal);
}

.scp-legend {
    margin: 0 0 var(--schilcher-space-lg);
}

.scp-legend__title {
    margin: 0 0 var(--schilcher-space-sm);
    font-size: var(--schilcher-text-body);
    font-weight: var(--schilcher-font-weight-semibold);
}

.scp-legend__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--schilcher-space-sm) var(--schilcher-space-lg);
    margin: 0;
}

.scp-legend__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--schilcher-space-xs);
}

.scp-legend__item dd {
    margin: 0;
    font-size: var(--schilcher-text-small);
    color: var(--schilcher-text-secondary);
}

.scp-faq {
    margin-top: var(--schilcher-space-2xl);
}

.scp-faq__item {
    border-bottom: 1px solid var(--schilcher-border-color);
}

.scp-faq__item:last-child {
    border-bottom: none;
}

.scp-faq__question {
    padding: var(--schilcher-space-sm) 0;
}

.scp-faq__answer {
    padding: 0 0 var(--schilcher-space-md) calc(0.5em + var(--schilcher-space-sm));
}

.scp-faq__answer p {
    margin: 0 0 var(--schilcher-space-sm);
}

.scp-faq__answer a {
    color: var(--schilcher-primary-text-brown);
    font-weight: var(--schilcher-font-weight-semibold);
}

/* Guidance in the packaging form: intro line, level notes and help texts */

.scp-field .scp-help {
    margin: 0;
}

.scp-question .scp-help {
    margin: 0 0 var(--schilcher-space-xs);
}

.scp-level__note {
    margin: calc(var(--schilcher-space-sm) * -1) 0 var(--schilcher-space-md);
    font-size: var(--schilcher-text-small);
    color: var(--schilcher-text-secondary);
}

.scp-packaging__intro {
    margin: 0 0 var(--schilcher-space-lg);
}

.scp-confirmation__statement-help {
    margin: calc(var(--schilcher-space-md) * -1) 0 var(--schilcher-space-lg);
}

.scp-confirmation__help {
    margin: var(--schilcher-space-md) 0 0;
}