*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    color: var(--color-heading);
    line-height: 1.25;
    margin: 0 0 var(--space-4);
    font-weight: 600;
    overflow-wrap: break-word;
    hyphens: auto;
}

p, li, dd, dt, td, th, label, figcaption {
    overflow-wrap: break-word;
}

h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.75rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 var(--space-4); }

a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.25em;
    text-decoration-skip-ink: none;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

img { max-width: 100%; height: auto; }

ul { margin: 0; padding: 0; }

.container {
    width: 100%;
    max-width: var(--container-width);
    margin-inline: 0;
    padding-inline: max(var(--container-gutter-min), var(--container-gutter));
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--space-2);
    background: var(--color-dark);
    color: var(--color-dark-text);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    z-index: 100;
}

.skip-link:focus {
    left: var(--space-4);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-4);
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    font-size: 1.15rem;
    text-decoration: none;
    color: var(--color-heading);
}

.site-header__name {
    white-space: nowrap;
}

.site-nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    list-style: none;
}

.site-nav__toggle {
    display: none;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-heading);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.site-nav__toggle:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

@media (max-width: 64rem) {
    .site-header[data-nav="bereit"] .site-nav__toggle {
        display: inline-flex;
    }

    .site-header[data-nav="bereit"] .site-nav {
        display: none;
        flex-basis: 100%;
    }

    .site-header[data-nav="bereit"][data-nav-offen] .site-nav {
        display: block;
        padding-bottom: var(--space-4);
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
    }

    .site-nav__list > li > a:not(.button) {
        display: block;
        padding-block: var(--space-3);
    }

    .site-nav__list .button {
        width: 100%;
        margin-top: var(--space-2);
    }
}

.site-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav__list a:not(.button) {
    text-decoration: none;
    color: var(--color-text-muted);
    font-weight: 500;
}

.site-nav__list a:not(.button):hover {
    color: var(--color-heading);
}

.site-nav__list .button {
    text-decoration: none;
}

.button {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-button, var(--radius-sm));
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.button--accent {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent-strong);
}

.button--accent:hover {
    background: var(--color-accent-strong);
}

.button--ghost {
    background: transparent;
    color: var(--color-heading);
    border-color: var(--color-border);
}

.button--ghost:hover {
    border-color: var(--color-heading);
}

.button--dark {
    background: var(--color-dark);
    color: var(--color-dark-text);
}

.main {
    min-height: 60vh;
}

.hero {
    background: var(--color-bg-muted);
    border-bottom: 1px solid var(--color-border);
}

.hero__inner {
    padding-block: var(--space-16);
    max-width: none;
}

.hero__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.hero__text {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.anker {
    display: block;
    height: 0;
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.hero--bild .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-8);
}

.hero__figure {
    margin: 0;
}

.hero__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

@media (max-width: 64rem) {
    .hero--bild .hero__inner {
        grid-template-columns: minmax(0, 1fr);
    }
}

.section {
    padding-block: var(--space-12);
}

.section--muted {
    background: var(--color-bg-muted);
}

.section__title {
    margin-bottom: var(--space-6);
}

.section__text {
    color: var(--color-text-muted);
    max-width: none;
}

.cards {
    --columns: 3;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--grid-gap);
    list-style: none;
}

.cards--1 { --columns: 1; }
.cards--2 { --columns: 2; }
.cards--3 { --columns: 3; }
.cards--4 { --columns: 4; }

.section__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.card__image {
    display: block;
    width: calc(100% + var(--card-padding) * 2);
    max-width: none;
    height: auto;
    margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) var(--card-padding);
    border-bottom: 1px solid var(--color-border);
}

.cards--bild-panorama .card__image,
.cards--bild-wide .card__image,
.cards--bild-classic .card__image,
.cards--bild-square .card__image,
.cards--bild-portrait .card__image {
    height: auto;
    object-fit: cover;
    object-position: top center;
}

.cards--passung-contain .card__image {
    object-fit: contain;
    object-position: center;
    background: var(--color-bg-muted);
    padding: var(--space-4);
}

.cards--bild-panorama .card__image { aspect-ratio: 16 / 10; }
.cards--bild-wide .card__image { aspect-ratio: 16 / 9; }
.cards--bild-classic .card__image { aspect-ratio: 4 / 3; }
.cards--bild-square .card__image { aspect-ratio: 1 / 1; }
.cards--bild-portrait .card__image { aspect-ratio: 3 / 4; }

.card__symbol {
    margin: 0 0 var(--space-3);
    color: var(--color-accent-strong);
}

.card__nummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin: 0 0 var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-bg-muted);
    color: var(--color-heading);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.card__zitat {
    margin: var(--space-3) 0 0;
    color: var(--color-link);
    font-weight: 600;
}

.icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
}

.facts__item .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.card {
    --card-padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--card-padding);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card__title {
    margin-bottom: var(--space-2);
}

.card__text {
    color: var(--color-text-muted);
    margin: 0;
}

.alert {
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-block: var(--space-4);
    border: 1px solid transparent;
}

.alert--success { background: var(--color-success-bg); color: var(--color-success-text); }
.alert--error   { background: var(--color-error-bg);   color: var(--color-error-text); }
.alert--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.alert--info    { background: var(--color-info-bg);    color: var(--color-info-text); }

.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    margin-top: var(--space-16);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-8) var(--space-6);
    padding-block: var(--space-10) var(--space-6);
    color: var(--color-text-muted);
    font-size: 0.925rem;
}

.site-footer__title {
    margin: 0 0 var(--space-3);
    font-weight: 600;
    color: var(--color-heading);
}

.site-footer__brand {
    grid-column: 1 / -1;
}

.site-footer__logo {
    display: block;
    max-height: 3rem;
    width: auto;
}

.site-footer__name {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-heading);
}

.site-footer__tagline {
    margin: var(--space-4) 0 0;
    max-width: 24rem;
}

@media (min-width: 64rem) {
    .site-footer__brand {
        grid-column: span 2;
    }
}

.site-footer__bottom {
    border-top: 1px solid var(--color-border);
    padding-block: var(--space-4);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.site-footer__list a {
    text-decoration: none;
}

.site-footer__list a:hover {
    text-decoration: underline;
}

.site-footer__copyright {
    margin: 0;
}

.error-page {
    padding-block: var(--space-16);
    max-width: none;
}

.error-page__status {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
}

.error-page__debug {
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    overflow-x: auto;
    font-size: 0.85rem;
}

.prose {
    max-width: none;
    padding-block: var(--space-12);
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

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

.form-trap {
    display: none !important;
}

.inline-form {
    display: inline;
    margin: 0;
}

.beschreibung {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--space-2) var(--space-6);
    margin: var(--space-6) 0;
}

.beschreibung dt {
    font-weight: 600;
    color: var(--color-heading);
}

.beschreibung dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 40rem) {
    .beschreibung {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .beschreibung dd {
        margin-bottom: var(--space-4);
    }
}

.button--klein {
    min-height: 2.25rem;
    padding: 0 var(--space-3);
    font-size: 0.85rem;
}

.aufbau {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: var(--space-6) 0;
    padding: 0;
    counter-reset: aufbau;
}

.aufbau__element {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.aufbau__element--frage {
    border-left: 3px solid var(--color-accent);
}

.aufbau__art {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.aufbau__titel {
    min-width: 0;
    color: var(--color-heading);
}

.aufbau__leer {
    color: var(--color-text-muted);
    font-style: italic;
}

.aufbau__aktionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.aufbau__verweis {
    font-size: 0.9rem;
}

@media (max-width: 52rem) {
    .aufbau__element {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }
}

.form-page {
    max-width: var(--measure-form);
    padding-block: var(--space-12);
}

.account {
    padding-block: var(--space-12);
}

.account > h2 {
    margin-top: var(--space-12);
}

.account > h2:first-of-type {
    margin-top: var(--space-10);
}

.form {
    margin-block: var(--space-6);
}

.field {
    margin-bottom: var(--space-4);
}

.field label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-1);
}

.field--toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.field--toggle input {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    accent-color: var(--color-accent-strong);
}

.field--toggle label {
    margin-bottom: 0;
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.search-form input,
.field select,
.field textarea,
.control {
    width: 100%;
    min-height: var(--control-height);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-interactive);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
.field select:hover,
.field textarea:hover,
.control:hover {
    border-color: var(--color-border-interactive-hover);
}

.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.control:focus-visible {
    border-color: var(--color-accent-strong);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
    outline: 3px solid var(--color-focus);
    outline-offset: 1px;
}

.field input::placeholder,
.field textarea::placeholder,
.control::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.field input:disabled,
.field select:disabled,
.field textarea:disabled,
.control:disabled {
    background-color: var(--color-surface-sunken);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.field select,
.control--select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: var(--space-10);
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 1.35rem) center,
        calc(100% - 1rem) center;
    background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
    background-repeat: no-repeat;
    cursor: pointer;
}

.field select option,
.control--select option {
    background-color: var(--color-surface);
    color: var(--color-text);
}

.field textarea,
textarea.control {
    min-height: 7rem;
    line-height: 1.6;
    resize: vertical;
}

.field--check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.field--check label {
    font-weight: 400;
    margin: 0;
}

.field--check input {
    margin-top: 0.3rem;
}

.field__hint {
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.field-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.field-row .field {
    flex: 1 1 12rem;
}

.field--narrow {
    flex: 0 1 8rem;
}

.field--wide {
    flex: 2 1 16rem;
}

.fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-6);
}

.fieldset legend {
    padding-inline: var(--space-2);
    font-weight: 600;
}

.delivery__fields {
    margin-top: var(--space-4);
}

.delivery:has(#checkout-abweichende-lieferadresse:not(:checked)) .delivery__fields {
    display: none;
}

.checkout__main:has(#checkout-kundenart-geschaeft:checked) .consumer-only {
    display: none;
}

.summary__hint {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

.form__hint {
    margin-top: var(--space-3);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.form__links {
    margin-top: var(--space-6);
    color: var(--color-text-muted);
}

.alert__title {
    margin: 0 0 var(--space-2);
    font-weight: 600;
}

.alert__list {
    margin: 0;
    padding-left: var(--space-6);
}

.stats {
    --columns: 4;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--grid-gap-tight);
    list-style: none;
    margin-block: var(--space-6);
}

@media (min-width: 68.0625rem) {
    .stats:has(> :last-child:nth-child(1)) { --columns: 1; }
    .stats:has(> :last-child:nth-child(2)) { --columns: 2; }
    .stats:has(> :last-child:nth-child(3)) { --columns: 3; }
}

.stats > *,
.cards > *,
.product-grid > *,
.nav-cards > *,
.panel-grid > *,
.order-list > *,
.access-list > *,
.post-list > *,
.code-list > * {
    min-width: 0;
}

.stat {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: left;
}

.panel .stat {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.panel .stats {
    gap: var(--space-8);
}

@media (min-width: 44.0625rem) {
    .panel .stat + .stat {
        padding-left: var(--space-8);
        border-left: 1px solid var(--color-border);
    }

    .panel .stats {
        gap: 0;
    }
}

.stat__value {
    display: block;
    font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2rem);
    font-weight: 700;
    color: var(--color-heading);
    overflow-wrap: anywhere;
}

.stat__label {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.link-list {
    list-style: none;
    display: grid;
    gap: var(--space-2);
}

.nav-cards {
    --columns: 3;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--grid-gap-tight);
    margin-block: var(--space-6);
    padding: 0;
}

.nav-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    height: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.nav-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

.nav-card--primary {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
}

.nav-card--primary:hover {
    border-color: var(--color-accent-strong);
}

.panel .nav-card {
    border-color: transparent;
    background: var(--color-surface-sunken);
}

.panel .nav-card:hover {
    border-color: var(--color-accent-strong);
    box-shadow: none;
}

.panel .nav-card--primary {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
}

.nav-card__title {
    font-weight: 600;
    color: var(--color-heading);
}

.nav-card__text {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.product-grid {
    --columns: 3;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--grid-gap);
    list-style: none;
    margin-block: var(--space-6);
}

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.product-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-muted);
    overflow: hidden;
}

.product-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-card__body {
    flex: 1;
    padding: var(--space-6) var(--space-6) var(--space-3);
}

.product-card__title {
    font-size: 1.1rem;
    margin-bottom: var(--space-1);
}

.product-card__title a {
    text-decoration: none;
}

.product-card__title a:hover {
    text-decoration: underline;
}

.product-card__type {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.product-card__text {
    color: var(--color-text-muted);
    margin: 0;
}

.product-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6) var(--space-6);
}

.price {
    margin: 0;
}

.price__amount {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-heading);
}

.price__note {
    display: block;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.price--large .price__amount {
    font-size: 1.9rem;
}

.badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
}

.badge--accent {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.filter-nav {
    margin-block: var(--space-6);
}

.filter-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
}

.filter-nav__link {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 0.925rem;
}

.filter-nav__link:hover {
    border-color: var(--color-heading);
    color: var(--color-heading);
}

.filter-nav__link--active {
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-color: var(--color-accent-strong);
    font-weight: 600;
}

.pagination {
    margin-block: var(--space-8);
}

.pagination__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    align-items: center;
}

.pagination__link {
    display: inline-block;
    min-width: 2.5rem;
    text-align: center;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text);
}

.pagination__link:hover {
    border-color: var(--color-heading);
}

.pagination__link--current {
    background: var(--color-dark);
    color: var(--color-dark-text);
    border-color: var(--color-dark);
    font-weight: 600;
}

.pagination__gap {
    color: var(--color-text-muted);
}

.pagination__info {
    margin: var(--space-3) 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.breadcrumbs {
    margin-bottom: var(--space-6);
    font-size: 0.875rem;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    color: var(--color-text-muted);
}

.breadcrumbs__list li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--color-border);
}

.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    gap: var(--space-8);
    align-items: start;
}

.product-detail__media {
    grid-column: 1 / -1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.product-detail__main {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.product-detail__main > :last-child {
    margin-bottom: 0;
}

.product-detail__type {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.product-detail__lead {
    font-size: 1.1rem;
    color: var(--color-text-muted);
}

.product-detail__text p {
    max-width: none;
}

.product-detail__buy {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
}

.product-detail__duration,
.product-detail__sku {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.product-detail__hint,
.product-detail__legal {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: var(--space-4);
    margin-bottom: 0;
}

.button--block {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: var(--space-4);
}

.search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin-block: var(--space-6);
}

.search-form .field {
    flex: 1 1 18rem;
    margin-bottom: 0;
}

.search-form input[type="search"] {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}

@media (max-width: 52rem) {
    .product-detail {
        grid-template-columns: 1fr;
    }

    .product-detail__buy {
        position: static;
    }

    .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
}

.badge--success { background: var(--color-success-bg); color: var(--color-success-text); }
.badge--error   { background: var(--color-error-bg);   color: var(--color-error-text); }
.badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge--info    { background: var(--color-info-bg);    color: var(--color-info-text); }
.badge--muted   { background: var(--color-bg-muted);   color: var(--color-text-muted); }

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.page-head h1 {
    margin: 0;
}

.panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin-block: var(--space-6);
}

.panel h2 {
    margin-top: 0;
}

.panel > .form,
.panel > .section__text {
    max-width: var(--measure-form);
}

.panel > :last-child {
    margin-bottom: 0;
}

.panel .nav-cards,
.panel .stats,
.panel .order-list,
.panel .access-list {
    margin-block: 0;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--color-surface-sunken);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-8);
}

.panel > .empty-state {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.empty-state__title {
    margin: 0;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-heading);
}

.empty-state__text {
    margin: 0;
    color: var(--color-text-muted);
    max-width: var(--measure-form);
}

.panel-grid {
    --columns: 2;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--grid-gap-tight);
    margin-block: var(--space-6);
}

.panel-grid .panel {
    margin-block: 0;
}

.detail-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.detail-list > div {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) 1fr;
    gap: var(--space-3);
}

.detail-list dt {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.detail-list dd {
    margin: 0;
}

.address {
    font-style: normal;
    line-height: 1.7;
}

.order-list,
.access-list {
    --columns: 2;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--grid-gap-tight);
    margin-block: var(--space-6);
    padding: 0;
}

.access-list > :only-child {
    grid-column: 1 / -1;
}

.order-card,
.access-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.panel .order-card,
.panel .access-card,
.panel .post-card,
.panel .product-card {
    border-color: transparent;
    background: var(--color-surface-sunken);
    box-shadow: none;
}

.order-card__head,
.access-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.order-card__title,
.access-card__title {
    margin: 0;
    font-size: 1.05rem;
}

.order-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: 0;
}

.order-card__meta dt {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.order-card__meta dd {
    margin: 0;
    font-weight: 600;
}

.order-card__hint,
.access-card__type,
.access-card__validity {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.access-card__actions {
    margin-top: auto;
}

.checkout__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(18rem, 1fr);
    gap: var(--space-8);
    align-items: start;
}

.checkout__summary {
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-md);
}

.checkout__summary h2 {
    margin-top: 0;
}

.summary__product {
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.summary__name {
    margin: 0;
    font-weight: 600;
}

.summary__type {
    margin: var(--space-1) 0 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.summary__totals {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}

.summary__totals > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.summary__totals dt {
    color: var(--color-text-muted);
}

.summary__totals dd {
    margin: 0;
}

.summary__total {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-weight: 700;
    font-size: 1.1rem;
}

.summary__total dt {
    color: var(--color-heading);
}

.checkout__legal {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 0;
}

.checkout__confirm {
    margin-block: var(--space-5);
    padding: var(--space-5);
    border: 2px solid var(--color-accent-strong);
    border-radius: var(--radius-md);
    background: var(--color-accent-soft);
}

.checkout__confirm-title {
    margin: 0 0 var(--space-3);
    font-weight: 700;
    color: var(--color-heading);
}

.checkout__confirm-list {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
}

.checkout__confirm-list > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
}

.checkout__confirm-list dt {
    color: var(--color-text-muted);
}

.checkout__confirm-list dd {
    margin: 0;
    text-align: right;
    color: var(--color-heading);
}

.checkout__confirm-total {
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-weight: 700;
    font-size: 1.15rem;
}

.checkout__confirm-total dt {
    color: var(--color-heading);
}

.checkout__confirm-hint {
    margin: 0 0 var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.field--grow {
    flex: 2 1 14rem;
}

.page-content p {
    max-width: var(--measure-form);
}

.section-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
}

.section-nav__link {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text-muted);
}

.section-nav__link--active {
    background: var(--color-accent);
    border-color: var(--color-accent-strong);
    color: var(--color-accent-text);
    font-weight: 600;
}

@media (max-width: 60rem) {
    .checkout__grid {
        grid-template-columns: 1fr;
    }

    .checkout__summary {
        position: static;
    }

    .detail-list > div {
        grid-template-columns: 1fr;
        gap: var(--space-1);
    }
}

.field__error {
    margin: var(--space-2) 0 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-error-text);
}

[aria-invalid="true"] {
    border-color: var(--color-error-text);
    outline-color: var(--color-error-text);
}


.table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-4);
    font-size: 0.925rem;
}

.table caption {
    text-align: left;
    padding-bottom: var(--space-2);
    color: var(--color-text-muted);
}

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

.table th {
    font-weight: 600;
    white-space: nowrap;
}

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

.table tfoot td,
.table tfoot th {
    border-top: 2px solid var(--color-border-strong);
    border-bottom: 0;
    font-weight: 600;
}

.table code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    word-break: break-all;
}

.table-scroll {
    overflow-x: auto;
}

.code-list {
    --columns: 4;
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--space-2);
}

.code-list code,
.setup-key code {
    display: block;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
}

.setup-key {
    margin: 0 0 var(--space-4);
}

.post-list {
    --columns: 2;
    list-style: none;
    margin: 0 0 var(--space-8);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--grid-gap-tight);
}

.post-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.post-card__title {
    margin: 0 0 var(--space-2);
    font-size: 1.2rem;
}

.post-card__title a {
    text-decoration: none;
    color: var(--color-heading);
}

.post-card__title a:hover {
    text-decoration: underline;
}

.post-card__meta,
.post__meta {
    margin: 0 0 var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.post-card__text {
    margin: 0;
    color: var(--color-text-muted);
}

.post {
    max-width: none;
}

.currency-form {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.currency-form__select {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position:
        calc(100% - 1.05rem) center,
        calc(100% - 0.75rem) center;
    background-size: 0.325rem 0.325rem, 0.325rem 0.325rem;
    background-repeat: no-repeat;
    color: var(--color-text);
    font: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

.currency-form__select:hover {
    border-color: var(--color-border-strong);
}

@media (min-width: 100rem) {
    .product-grid,
    .nav-cards {
        --columns: 4;
    }

    .stats {
        --columns: 5;
    }

    .post-list,
    .panel-grid,
    .order-list,
    .access-list {
        --columns: 3;
    }
}

@media (max-width: 68rem) {
    .cards,
    .cards--3,
    .cards--4,
    .product-grid,
    .nav-cards,
    .stats {
        --columns: 2;
    }

    .cards--1 {
        --columns: 1;
    }

    .code-list {
        --columns: 3;
    }
}

@media (max-width: 52rem) {
    .panel-grid,
    .order-list,
    .access-list,
    .post-list {
        --columns: 1;
    }
}

@media (max-width: 44rem) {
    .cards,
    .cards--2,
    .cards--3,
    .cards--4,
    .product-grid,
    .nav-cards {
        --columns: 1;
    }

    .stats,
    .code-list {
        --columns: 2;
    }
}

.panel--module {
    border-color: var(--color-accent-strong);
    background: linear-gradient(
        180deg,
        var(--color-accent-soft) 0%,
        var(--color-surface) 6rem
    );
}

.panel__eyebrow {
    margin: 0 0 var(--space-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.panel__meta {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.panel--frage {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.panel--frage:focus-within {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
}

.panel--vertiefung {
    margin-left: var(--space-8);
    background: var(--color-surface-sunken);
}

.panel--nav {
    position: sticky;
    bottom: var(--space-4);
    z-index: 5;
    padding: var(--space-4) var(--space-5);
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-lg);
}

.assessment-foot {
    margin: var(--space-6) 0 0;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.assessment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.assessment-head__step {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.925rem;
}

.assessment-progress {
    --columns: 6;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--space-2);
    list-style: none;
    margin-block: var(--space-6);
    padding: 0;
    counter-reset: none;
}

.assessment-progress__step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.assessment-progress__step--erledigt {
    border-color: var(--color-success-border);
}

.assessment-progress__step--erledigt .assessment-progress__number {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.assessment-progress__step--aktuell {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
    color: var(--color-heading);
    font-weight: 600;
}

.assessment-progress__number {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--radius-pill);
    background: var(--color-bg-muted);
    font-weight: 700;
    font-size: 0.8rem;
}

.assessment-progress__step--aktuell .assessment-progress__number {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.assessment-progress__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.question__title {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-heading);
    line-height: 1.4;
}

.question__number {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.85rem;
    height: 1.85rem;
    margin-top: 0.05rem;
    border-radius: var(--radius-pill);
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.question__badge {
    flex: none;
    align-self: center;
    padding: 0.15rem var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.question__text {
    min-width: 0;
}

.question__required {
    margin-left: 0.15rem;
    color: var(--color-accent-strong);
    font-weight: 700;
}

.question > .control,
.question > .field {
    margin-top: var(--space-4);
}

.question > .field:last-child {
    margin-bottom: 0;
}

.question__hint {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.question:has(.question__number) .question__hint {
    padding-left: calc(1.85rem + var(--space-3));
}

.question__error {
    margin: var(--space-2) 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-error-bg);
    color: var(--color-error-text);
    font-size: 0.9rem;
}

.question--invalid .question__title {
    color: var(--color-error-text);
}

.choice-list {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

.choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.choice:hover {
    border-color: var(--color-accent-strong);
}

.choice:has(input:checked) {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
}

.choice:has(input:focus-visible) {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.choice input {
    margin-top: 0.2rem;
    width: 1.1rem;
    height: 1.1rem;
    flex: none;
    accent-color: var(--color-accent-strong);
}

.choice label {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    font-weight: 400;
    cursor: pointer;
}

.choice__label {
    font-weight: 500;
    color: var(--color-heading);
}

.choice__text {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.choice--reveal {
    flex-wrap: wrap;
}

.choice__reveal {
    display: none;
    flex-basis: 100%;
    margin-top: var(--space-3);
}

.choice input:checked ~ .choice__reveal {
    display: block;
}

.choice__reveal > .field:last-child {
    margin-bottom: 0;
}

.choice-cards {
    --columns: 3;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--grid-gap-tight);
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

.choice-cards > * {
    min-width: 0;
}

.choice-cards__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.choice-card {
    position: relative;
    display: grid;
    gap: var(--space-2);
    align-content: start;
    height: 100%;
    padding: var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast),
        box-shadow var(--transition-fast), transform var(--transition-fast);
}

.choice-card:hover {
    border-color: var(--color-accent-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.choice-cards__input:checked + .choice-card {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
}

.choice-cards__input:focus-visible + .choice-card {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.choice-card__title {
    font-weight: 600;
    color: var(--color-heading);
}

.choice-card__text {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.scale {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

.scale__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.scale__label {
    display: block;
    min-width: 3rem;
    padding: var(--space-3) var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    cursor: pointer;
    font-weight: 600;
    text-align: center;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.scale__label:hover {
    border-color: var(--color-accent-strong);
}

.scale__input:checked + .scale__label {
    border-color: var(--color-accent-strong);
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.scale__input:focus-visible + .scale__label {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.assessment-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.assessment-nav__hint {
    flex: 1 1 12rem;
    margin: 0;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.assessment-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.assessment-bar__track {
    flex: 1 1 auto;
    min-width: 0;
    height: 0.5rem;
}

.assessment-bar__label {
    flex: none;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

progress {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-bg-muted);
    color: var(--color-accent-strong);
    overflow: hidden;
}

progress::-webkit-progress-bar {
    background: var(--color-bg-muted);
    border-radius: var(--radius-pill);
}

progress::-webkit-progress-value {
    background: var(--color-accent-strong);
    border-radius: var(--radius-pill);
}

progress::-moz-progress-bar {
    background: var(--color-accent-strong);
    border-radius: var(--radius-pill);
}

.meter {
    display: inline-block;
    vertical-align: middle;
    width: 6rem;
    height: 0.5rem;
    margin-right: var(--space-2);
}

@media (max-width: 68rem) {
    .assessment-progress {
        --columns: 3;
    }

    .choice-cards {
        --columns: 2;
    }
}

@media (max-width: 44rem) {
    .assessment-progress {
        --columns: 2;
    }

    .assessment-progress__label {
        display: none;
    }

    .choice-cards {
        --columns: 1;
    }

    .panel--vertiefung {
        margin-left: 0;
    }

    .assessment-nav__hint {
        order: 3;
        flex-basis: 100%;
        text-align: left;
    }

    .steps__item {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .steps__number {
        margin-top: 0.1rem;
    }

    .steps__count {
        width: 100%;
        padding-left: calc(2rem + var(--space-4));
    }

    .assessment-nav .button {
        flex: 1 1 auto;
    }

    .question__title {
        font-size: 1.05rem;
    }
}

.content-block__eyebrow {
    margin: 0 0 var(--space-2);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.content-block__headline {
    margin: 0 0 var(--space-2);
    font-size: 1.3rem;
}

.content-block__subline {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
}

.content-block__image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin-block: var(--space-4);
}

.content-block__caption {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.content-block__figur {
    margin: 0;
}

.content-block__bildunterschrift {
    margin-top: calc(var(--space-2) * -1);
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.content-block__satz {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

.content-block__fliesstext > :last-child {
    margin-bottom: 0;
}

.content-block--bild-full .content-block__image {
    width: 100%;
}

@media (min-width: 48rem) {
    .content-block--bild-left .content-block__satz,
    .content-block--bild-right .content-block__satz {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .content-block--bild-right .content-block__figur {
        order: 2;
    }
}

.content-block__trenner {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-block: var(--space-6);
}

.content-quote {
    margin: 0;
    padding-left: var(--space-5);
    border-left: 3px solid var(--color-accent);
}

.content-quote .rich-text {
    font-size: 1.1rem;
    line-height: 1.6;
}

.content-quote__quelle {
    display: block;
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-style: normal;
}

.content-block--info,
.content-block--warning,
.content-block--success {
    border-radius: var(--radius-md);
    padding: var(--space-5);
    border: 1px solid transparent;
}

.content-block--info {
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
}

.content-block--info .content-block__headline,
.content-block--info .content-block__eyebrow {
    color: var(--color-info-text);
}

.content-block--warning {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
}

.content-block--warning .content-block__headline,
.content-block--warning .content-block__eyebrow {
    color: var(--color-warning-text);
}

.content-block--success {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}

.content-block--success .content-block__headline,
.content-block--success .content-block__eyebrow {
    color: var(--color-success-text);
}

.content-cards {
    display: grid;
    grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
    gap: var(--grid-gap-tight);
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

@media (min-width: 68.0625rem) {
    .content-cards[data-spalten="1"] { --columns: 1; }
    .content-cards[data-spalten="2"] { --columns: 2; }
    .content-cards[data-spalten="3"] { --columns: 3; }
    .content-cards[data-spalten="4"] { --columns: 4; }
    .content-cards[data-spalten="5"] { --columns: 5; }
    .content-cards[data-spalten="6"] { --columns: 6; }
}

.content-cards > * {
    min-width: 0;
}

.content-card {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.content-card .content-block__image {
    margin-block: 0 var(--space-2);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

.content-card__title {
    font-weight: 600;
    color: var(--color-heading);
}

.content-card__text {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.content-accordion {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-4) var(--space-5);
    margin-block: var(--space-2);
}

.panel > .content-accordion {
    margin-block: 0;
    padding-inline: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.panel > .content-accordion + .content-accordion {
    border-top: 1px solid var(--color-border);
}

.content-accordion > summary {
    display: grid;
    gap: var(--space-1);
    cursor: pointer;
}

.content-accordion__title {
    font-weight: 600;
    color: var(--color-heading);
}

.content-accordion__text {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.content-accordion__text .meter {
    flex: none;
    margin: 0;
}

.content-accordion[open] > summary {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.content-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.content-tabs__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.content-tabs__label {
    order: -1;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
}

.content-tabs__input:checked + .content-tabs__label {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
    color: var(--color-heading);
}

.content-tabs__input:focus-visible + .content-tabs__label {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.content-tabs__panel {
    display: none;
    width: 100%;
    padding-top: var(--space-4);
}

.content-tabs__input:checked + .content-tabs__label + .content-tabs__panel {
    display: block;
}

.content-checklist {
    display: grid;
    gap: var(--space-2);
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

.content-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.content-checklist__mark {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-success-border);
    background:
        linear-gradient(45deg, transparent 44%, var(--color-success-text) 44%, var(--color-success-text) 56%, transparent 56%),
        linear-gradient(-45deg, transparent 44%, var(--color-success-text) 44%, var(--color-success-text) 56%, transparent 56%);
    background-size: 60% 2px, 60% 2px;
    background-position: 20% 60%, 20% 60%;
    background-repeat: no-repeat;
}

.content-checklist__title {
    display: block;
    color: var(--color-heading);
}

.content-checklist__text {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.content-steps__wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    gap: var(--space-6);
    align-items: start;
    margin-top: var(--space-4);
}

.content-steps__wrap:not(:has(.content-block__image)) {
    grid-template-columns: minmax(0, 1fr);
}

.content-steps {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--color-surface-sunken);
    counter-reset: schritt;
    list-style: none;
}

.content-steps__item {
    display: grid;
    gap: var(--space-1);
    padding-left: var(--space-8);
    position: relative;
    counter-increment: schritt;
}

.content-steps__item::before {
    content: counter(schritt) ".";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--color-accent-strong);
}

.content-steps__title {
    color: var(--color-heading);
}

.content-steps__text {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.content-steps__wrap .content-block__image {
    margin-block: 0;
}

@media (max-width: 68rem) {
    .content-cards,
    .content-cards[data-spalten] {
        --columns: 2;
    }

    .content-cards[data-spalten="1"] {
        --columns: 1;
    }

    .content-steps__wrap {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 44rem) {
    .content-cards,
    .content-cards[data-spalten] {
        --columns: 1;
    }
}

.report-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.report-head h2 {
    margin-bottom: var(--space-2);
}

.panel--ergebnis {
    border-color: var(--color-accent-strong);
}

.score {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-6) var(--space-8);
    margin-block: var(--space-8) var(--space-6);
}

.score__value {
    margin: 0;
    font-size: clamp(3rem, 2rem + 5vw, 4.5rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
}

.score__max {
    display: block;
    margin-top: var(--space-2);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--color-text-muted);
}

.score__gauge {
    flex: 1 1 16rem;
    min-width: 0;
}

.score__track {
    display: block;
    width: 100%;
    height: 0.75rem;
}

.score__scale {
    display: flex;
    justify-content: space-between;
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.score__scale > :nth-child(2) {
    font-weight: 700;
    color: var(--color-heading);
}

.report-meta {
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.steps {
    display: grid;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.steps__item {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.steps__item + .steps__item {
    border-top: 1px solid var(--color-border);
}

.steps__number {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-pill);
    background: var(--color-bg-muted);
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.steps__item--aktuell .steps__number {
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.steps__body {
    display: grid;
    gap: 0.15rem;
    flex: 1 1 0;
    min-width: 0;
}

.steps__title {
    font-weight: 600;
    color: var(--color-heading);
}

.steps__text {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.steps__count {
    flex: none;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.report-item {
    padding-block: var(--space-4);
}

.report-item + .report-item {
    border-top: 1px solid var(--color-border);
}

.report-item__title {
    margin: 0 0 var(--space-2);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-heading);
}

.report-item__source {
    margin: 0 0 var(--space-2);
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.report-item--quote {
    margin-top: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
}

.report-section > h2 {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-size: 1.35rem;
}

.report-section--empfehlung,
.report-section--handlung {
    border-color: var(--color-success-border);
}

.report-section--empfehlung > h2,
.report-section--handlung > h2 {
    border-bottom-color: var(--color-success-border);
    color: var(--color-success-text);
}

.report-section--warnung {
    border-color: var(--color-warning-border);
}

.report-section--warnung > h2 {
    border-bottom-color: var(--color-warning-border);
    color: var(--color-warning-text);
}

.report-section--hilfe,
.report-section--weiterfuehrend {
    border-color: var(--color-info-border);
}

.report-section--hilfe > h2,
.report-section--weiterfuehrend > h2 {
    border-bottom-color: var(--color-info-border);
    color: var(--color-info-text);
}

.report-section--ergebnis,
.report-section--bewertung {
    border-color: var(--color-accent-strong);
}

.choice-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

.choice-buttons > li {
    flex: 1 1 12rem;
    min-width: 0;
}

.choice-buttons__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.choice-button {
    position: relative;
    display: grid;
    gap: var(--space-1);
    align-content: center;
    height: 100%;
    min-height: 3.5rem;
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    transition: border-color var(--transition-fast), background var(--transition-fast),
        box-shadow var(--transition-fast), transform var(--transition-fast);
}

.choice-button:hover {
    border-color: var(--color-accent-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.choice-buttons__input:checked + .choice-button {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
    color: var(--color-heading);
}

.choice-buttons__input:checked + .choice-button::after,
.choice-cards__input:checked + .choice-card::after {
    content: "";
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    width: 1.25rem;
    height: 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
}

.choice-buttons__input:checked + .choice-button::before,
.choice-cards__input:checked + .choice-card::before {
    content: "";
    position: absolute;
    top: 0.85rem;
    right: 0.98rem;
    z-index: 1;
    width: 0.3rem;
    height: 0.6rem;
    border: solid var(--color-accent-text);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.choice-buttons__input:focus-visible + .choice-button {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.choice-button__text {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.choice-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

.number-input {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
    max-width: 18rem;
}

.number-input input {
    width: 100%;
}

.number-input__unit {
    flex: none;
    color: var(--color-text-muted);
    font-weight: 500;
}

.question[hidden],
.panel[hidden] {
    display: none;
}

.summary__facts {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.summary__facts > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.summary__facts dt {
    color: var(--color-text-muted);
}

.summary__facts dd {
    margin: 0;
    text-align: right;
    color: var(--color-heading);
}

.order-card__links {
    margin: var(--space-2) 0 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.cookie-banner {
    position: static;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    border-top: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 64rem) {
    .cookie-banner {
        position: fixed;
    }
}

.cookie-banner__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-5);
}

.cookie-banner__text {
    flex: 1 1 24rem;
    min-width: 0;
}

.cookie-banner__title {
    margin: 0 0 var(--space-2);
    font-size: 1.05rem;
}

.cookie-banner__text p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
}

@media (max-width: 44rem) {
    .cookie-banner__actions {
        width: 100%;
    }

    .cookie-banner__actions .button {
        flex: 1 1 8rem;
    }
}

.panel--prose {
    max-width: var(--measure-prose);
}

.panel--prose > .rich-text > :first-child,
.panel--prose > :first-child {
    margin-top: 0;
}

.form-page > .form,
.form-page > .prose {
    max-width: none;
    margin-block: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.form-page > .form > :last-child,
.form-page > .prose > :last-child {
    margin-bottom: 0;
}

@media (min-width: 64rem) {
    .has-cookie-banner .site-footer {
        margin-bottom: 12rem;
    }
}

.section__prose {
    max-width: var(--measure-prose);
}

.split {
    display: grid;
    gap: var(--grid-gap);
    align-items: center;
}

.split__media {
    order: -1;
}

.split__image {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

@media (min-width: 48rem) {
    .split {
        grid-template-columns: 1fr 1fr;
    }

    .split--small {
        grid-template-columns: 2fr 1fr;
    }

    .split--large {
        grid-template-columns: 1fr 2fr;
    }

    .split--small.split--reversed {
        grid-template-columns: 1fr 2fr;
    }

    .split--large.split--reversed {
        grid-template-columns: 2fr 1fr;
    }

    .split__media {
        order: 0;
    }

    .split--reversed .split__text {
        order: 2;
    }
}

.rich-text--kacheln ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    margin-block: var(--space-5);
}

.rich-text--kacheln-1 ul {
    grid-template-columns: minmax(0, 1fr);
}

.rich-text--kacheln-2 ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.rich-text--kacheln-3 ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 48rem) {
    .rich-text--kacheln-2 ul,
    .rich-text--kacheln-3 ul {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rich-text--kacheln ul li {
    margin: 0;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.steps--modul {
    --columns: 1;
    display: grid;
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
    gap: var(--space-6);
    list-style: none;
    counter-reset: schritt;
    max-width: var(--measure-prose);
}

.steps--1 { --columns: 1; }
.steps--2 { --columns: 2; }
.steps--3 { --columns: 3; }
.steps--4 { --columns: 4; }

@media (max-width: 64rem) {
    .steps--3,
    .steps--4 {
        --columns: 2;
    }
}

@media (max-width: 48rem) {
    .steps {
        --columns: 1;
    }
}

.steps--modul .steps__item {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--space-4);
    align-items: start;
    padding: 0;
}

.steps--modul .steps__item + .steps__item {
    border-top: none;
}

.steps--modul .steps__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-accent-text);
    font-weight: 600;
    margin: 0;
}

.steps--modul .steps__title {
    margin-bottom: var(--space-1);
}

.steps--modul .steps__text {
    color: var(--color-text-muted);
    margin: 0;
}

.faq-block {
    max-width: 44rem;
    margin-inline: auto;
}

.faq {
    display: grid;
    gap: var(--space-3);
    max-width: var(--measure-prose);
}

.faq__item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    cursor: pointer;
    font-weight: 600;
    color: var(--color-heading);
    list-style: none;
}

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

.faq__question::after {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.25rem;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg) translate(-0.15rem, -0.15rem);
    transition: transform var(--transition-fast);
}

.faq__item[open] > .faq__question::after {
    transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
}

.faq__question:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}

.faq__answer {
    margin-top: var(--space-3);
    color: var(--color-text-muted);
}

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--grid-gap);
    list-style: none;
}

.facts__item {
    text-align: center;
}

.facts__value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
    line-height: 1.1;
}

.facts__label {
    color: var(--color-text-muted);
    margin: var(--space-1) 0 0;
}

.preis {
    display: grid;
    gap: var(--grid-gap);
    align-items: start;
}

.preis--center .preis__seite {
    max-width: 30rem;
    margin-inline: auto;
}

.preis__titel {
    margin-bottom: var(--space-3);
}

.preis__einleitung {
    margin: 0 0 var(--space-6);
    color: var(--color-text-muted);
}

.preis__karte {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
}

.preis__label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

.preis__betrag {
    margin: 0;
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--color-accent);
}

.preis__hinweis {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: 0.925rem;
}

.preis__liste {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: var(--space-6) 0 0;
    border-top: 1px solid var(--color-border);
}

.preis__punkt {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.preis__haken {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-accent-text);
}

.preis__haken .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.preis__button {
    margin-top: var(--space-6);
}

.preis__zahlung {
    margin: var(--space-3) 0 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.preis__zusagen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: var(--space-2) var(--space-6);
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
}

.preis__zusage {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.925rem;
}

.preis__zusage-haken {
    display: flex;
    flex: none;
    color: var(--color-accent);
}

.preis__zusage-haken .icon {
    width: 1rem;
    height: 1rem;
}

@media (min-width: 64rem) {
    .preis--split,
    .preis--split_reverse {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-12);
    }

    .preis--split_reverse .preis__text {
        order: 2;
    }
}

.cta--muted {
    background: var(--color-bg-muted);
}

.cta--accent {
    background: var(--color-accent-soft);
}

.cta--dark {
    background: var(--color-dark);
    color: var(--color-dark-text);
}

.cta--dark .cta__title,
.cta--dark .cta__text {
    color: var(--color-dark-text);
}

.cta__inner {
    max-width: var(--measure-prose);
}

.cta__title {
    margin-bottom: var(--space-3);
}

.cta__text {
    color: var(--color-text-muted);
    margin: 0;
}

.button--ghost-on-dark {
    background: var(--color-dark-text);
    color: var(--color-dark);
    border: 1px solid var(--color-dark-text);
}

.button--ghost-on-dark:hover {
    background: transparent;
    color: var(--color-dark-text);
}

.section-list {
    display: grid;
    gap: var(--space-3);
    list-style: none;
    padding: 0;
    counter-reset: abschnitt;
}

.section-list__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    background: var(--color-surface);
}

.section-list__head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    justify-content: space-between;
}

.section-list__title {
    font-weight: 600;
    margin: 0;
}

.section-list__meta {
    color: var(--color-text-muted);
    margin: var(--space-1) 0 0;
    font-size: 0.9rem;
}

.section-list__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.repeater {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}

.repeater > legend {
    font-weight: 600;
    padding-inline: var(--space-2);
}

.repeater__row {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
    margin-top: var(--space-4);
}

.repeater__row:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}

.repeater__label {
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
}

.field--narrow {
    max-width: 8rem;
}

.badge--muted {
    background: var(--color-surface-sunken);
    color: var(--color-text-muted);
}

.button--small {
    height: auto;
    padding: var(--space-2) var(--space-3);
    font-size: 0.875rem;
}

.text-muted {
    color: var(--color-text-muted);
}

.site-header__logo {
    display: block;
    max-height: 2.5rem;
    width: auto;
}