/* Allure – Basis, Layout und Komponenten. Farben und Maße kommen ausschließlich aus tokens.css. */

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

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

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    background-attachment: fixed;
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    line-height: 1.55;
    transition: background-color var(--transition), color var(--transition);
}

h1, h2, h3 {
    margin: 0 0 var(--space-3);
    line-height: 1.2;
    letter-spacing: -0.01em;
}

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

a {
    color: var(--color-brand-text);
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

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

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

/* ---------- Seitenrahmen ---------- */

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

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-hover));
    color: var(--color-on-accent);
    font-size: 1rem;
    box-shadow: var(--shadow-sm);
}

.page {
    flex: 1;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: var(--space-5);
}

.site-footer {
    padding: var(--space-5);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    text-align: center;
}

/* ---------- Layout ---------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.card {
    min-width: 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.card--large {
    padding: var(--space-6);
}

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

.status-list {
    margin: 0;
    padding-left: 1.25rem;
}

.stack {
    display: grid;
    align-content: start;
    gap: var(--space-4);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.button-row--end {
    justify-content: flex-end;
}

.button-row--center {
    justify-content: center;
}

/* ---------- Buttons ----------
 * Farbe und Icon kommen aus der Aktionsgruppe (templates/components/ui.html.twig: ui.action),
 * nie aus seitenspezifischem CSS.
 */

.btn {
    --btn-bg: var(--color-neutral);
    --btn-bg-hover: var(--color-neutral-hover);
    --btn-soft: var(--color-neutral-soft);
    --btn-text: var(--color-neutral-text);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    color: var(--color-on-accent);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn:hover {
    background: var(--btn-bg-hover);
}

.btn:active {
    transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

.btn--brand {
    --btn-bg: var(--color-brand);
    --btn-bg-hover: var(--color-brand-hover);
    --btn-soft: var(--color-brand-soft);
    --btn-text: var(--color-brand-text);
}

.btn--create {
    --btn-bg: var(--color-create);
    --btn-bg-hover: var(--color-create-hover);
    --btn-soft: var(--color-create-soft);
    --btn-text: var(--color-create-text);
}

.btn--edit {
    --btn-bg: var(--color-edit);
    --btn-bg-hover: var(--color-edit-hover);
    --btn-soft: var(--color-edit-soft);
    --btn-text: var(--color-edit-text);
}

.btn--delete {
    --btn-bg: var(--color-delete);
    --btn-bg-hover: var(--color-delete-hover);
    --btn-soft: var(--color-delete-soft);
    --btn-text: var(--color-delete-text);
}

/* Zurückhaltende Variante derselben Farbgruppe, z. B. in Tabellenzeilen */
.btn--soft {
    background: var(--btn-soft);
    color: var(--btn-text);
}

.btn--soft:hover {
    background: var(--btn-soft);
    border-color: var(--btn-bg);
}

.btn--outline {
    border-color: var(--color-border-strong);
    background: transparent;
    color: var(--btn-text);
}

.btn--outline:hover {
    border-color: var(--btn-bg);
    background: var(--btn-soft);
}

.btn--small {
    min-height: 2.25rem;
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
}

.btn--large {
    min-height: 3.25rem;
    padding: 0 var(--space-5);
}

.btn--icon {
    width: var(--control-height);
    padding: 0;
}

.btn--icon.btn--small {
    width: 2.25rem;
}

.btn__icon {
    font-size: 0.95em;
}

/* ---------- Formulare ---------- */

.field {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.field__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.field__required {
    color: var(--color-delete-text);
}

.field__hint,
.field__error {
    margin: 0;
    font-size: var(--font-size-sm);
}

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

.field__error {
    color: var(--color-delete-text);
}

.input,
.select,
.textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--control-height);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.textarea {
    min-height: 7.5rem;
    padding: var(--space-3);
    line-height: 1.5;
    resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
    color: var(--color-muted);
}

.input:hover,
.select:hover,
.textarea:hover {
    border-color: var(--color-brand);
}

.input:focus,
.select:focus,
.textarea:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: var(--focus-ring);
}

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

.field--invalid .input,
.field--invalid .select,
.field--invalid .textarea {
    border-color: var(--color-delete);
}

.field--invalid .input:focus,
.field--invalid .select:focus,
.field--invalid .textarea:focus {
    box-shadow: 0 0 0 3px rgb(209 67 75 / 0.25);
}

/* Eingabe mit Icon */
.input-wrap {
    position: relative;
}

.input-wrap__icon {
    position: absolute;
    top: 50%;
    left: var(--space-3);
    transform: translateY(-50%);
    color: var(--color-muted);
    pointer-events: none;
}

.input-wrap .input {
    padding-left: 2.5rem;
}

/* Select mit eigenem Pfeil */
.select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%);
    background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%;
    background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
    background-repeat: no-repeat;
}

/* Checkbox und Schalter */
.check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.check__input {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    accent-color: var(--color-brand);
    cursor: pointer;
}

/* ---------- Badges ---------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-neutral-soft);
    color: var(--color-neutral-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.badge--brand { background: var(--color-brand-soft); color: var(--color-brand-text); }
.badge--create { background: var(--color-create-soft); color: var(--color-create-text); }
.badge--edit { background: var(--color-edit-soft); color: var(--color-edit-text); }
.badge--delete { background: var(--color-delete-soft); color: var(--color-delete-text); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning-text); }

/* ---------- Hinweise ---------- */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-neutral-soft);
    color: var(--color-neutral-text);
}

.alert--create { background: var(--color-create-soft); color: var(--color-create-text); }
.alert--edit { background: var(--color-edit-soft); color: var(--color-edit-text); }
.alert--delete { background: var(--color-delete-soft); color: var(--color-delete-text); }
.alert--warning { background: var(--color-warning-soft); color: var(--color-warning-text); }

/* ---------- Seite „In Arbeit“ ---------- */

.construction {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 16rem);
    padding: var(--space-6) 0;
}

.construction__card {
    width: 100%;
    max-width: 38rem;
    padding: var(--space-7) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.construction__visual {
    position: relative;
    display: grid;
    place-items: center;
    width: 6.5rem;
    height: 6.5rem;
    margin: 0 auto var(--space-5);
    border-radius: 50%;
    background: var(--color-brand-soft);
    color: var(--color-brand);
}

.construction__gear {
    font-size: 2.75rem;
    animation: construction-spin 9s linear infinite;
}

.construction__gear--small {
    position: absolute;
    right: 0.35rem;
    bottom: 0.6rem;
    font-size: 1.5rem;
    color: var(--color-brand-text);
    animation-direction: reverse;
    animation-duration: 6s;
}

.construction__title {
    margin: var(--space-4) 0 var(--space-3);
    font-size: clamp(1.75rem, 4vw, 2.4rem);
}

.construction__text {
    max-width: 28rem;
    margin: 0 auto var(--space-5);
    color: var(--color-muted);
}

.progress {
    height: 0.5rem;
    margin: 0 auto var(--space-6);
    max-width: 20rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
}

.progress__bar {
    width: 40%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--color-brand), var(--color-brand-hover));
    animation: progress-slide 2.2s ease-in-out infinite;
}

@keyframes construction-spin {
    to { transform: rotate(360deg); }
}

@keyframes progress-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .construction__gear,
    .progress__bar {
        animation: none;
    }

    .progress__bar {
        width: 60%;
    }
}

/* ---------- Stilreferenz ---------- */

.swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-3);
}

.swatch {
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-on-accent);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.swatch--brand { background: var(--color-brand); }
.swatch--create { background: var(--color-create); }
.swatch--edit { background: var(--color-edit); }
.swatch--delete { background: var(--color-delete); }
.swatch--neutral { background: var(--color-neutral); }
.swatch--warning { background: var(--color-warning); }

/* ---------- Passwortfeld und Stärkeanzeige ---------- */

[hidden] {
    display: none !important;
}

.input-wrap--action .input {
    padding-right: 3rem;
}

.input-wrap__action {
    position: absolute;
    top: 50%;
    right: var(--space-2);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color var(--transition), color var(--transition);
}

.input-wrap__action:hover,
.input-wrap__action[aria-pressed="true"] {
    background: var(--color-brand-soft);
    color: var(--color-brand-text);
}

.meter {
    --meter-color: var(--color-border-strong);
    --meter-fill: 0%;

    display: grid;
    gap: var(--space-2);
}

.meter__track {
    height: 0.5rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
}

.meter__fill {
    width: var(--meter-fill);
    height: 100%;
    border-radius: inherit;
    background: var(--meter-color);
    transition: width var(--transition), background-color var(--transition);
}

.meter[data-level="1"] { --meter-color: var(--color-delete); --meter-fill: 25%; }
.meter[data-level="2"] { --meter-color: var(--color-warning); --meter-fill: 50%; }
.meter[data-level="3"] { --meter-color: var(--color-create); --meter-fill: 75%; }
.meter[data-level="4"] { --meter-color: var(--color-create); --meter-fill: 100%; }

.meter__text {
    margin: 0;
    font-size: var(--font-size-sm);
}

.meter[data-level="1"] strong { color: var(--color-delete-text); }
.meter[data-level="2"] strong { color: var(--color-warning-text); }
.meter[data-level="3"] strong,
.meter[data-level="4"] strong { color: var(--color-create-text); }

.match-status {
    min-height: 1.25rem;
}

.match-status--ok { color: var(--color-create-text); }
.match-status--bad { color: var(--color-delete-text); }

/* ---------- Installation ---------- */

.install {
    width: 100%;
    max-width: 60rem;
    margin: 0 auto;
    padding: var(--space-5) 0;
}

.install__intro {
    max-width: 36rem;
    margin: 0 auto var(--space-6);
    text-align: center;
}

.install__title {
    margin: var(--space-4) 0 var(--space-3);
    font-size: clamp(1.75rem, 4vw, 2.4rem);
}

.install__alert {
    margin-bottom: var(--space-5);
}

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

.field-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--space-3);
}

@media (max-width: 30rem) {
    .field-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.card__title--icon {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 1.25rem;
}

.card__title--icon i {
    color: var(--color-brand);
}

.install-done {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    max-width: 38rem;
    margin: var(--space-6) auto;
    text-align: center;
}

.install-done__visual {
    font-size: 3.5rem;
    line-height: 1;
    color: var(--color-create);
}

.install-done__title {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2rem);
}

/* ---------- Anmeldung und Dashboard ---------- */

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.auth {
    width: 100%;
    max-width: 26rem;
    margin: var(--space-6) auto;
}

.auth__intro {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    text-align: center;
}

.auth__visual {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-brand), var(--color-brand-hover));
    color: var(--color-on-accent);
    font-size: 1.5rem;
    box-shadow: var(--shadow-sm);
}

.auth__title {
    margin: 0;
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.page-title {
    margin: 0 0 var(--space-2);
    font-size: clamp(1.5rem, 4vw, 2rem);
}

/* ---------- Hauptmenü ---------- */

.site-header {
    flex-wrap: wrap;
}

.site-nav {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-width: 0;
    margin-left: var(--space-4);
}

.site-nav__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.site-nav__link:hover {
    background: var(--color-surface-2);
    color: var(--color-text);
}

.site-nav__link[aria-current="page"] {
    background: var(--color-brand-soft);
    color: var(--color-brand-text);
}

.site-nav__link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Menüpunkt mit Untermenü: Link zur Übersicht, daneben der Knopf, der das Untermenü aufklappt. */
.site-nav__group {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-pill);
    transition: background var(--transition);
}

.site-nav__group:hover {
    background: var(--color-surface-2);
}

.site-nav__group.is-active {
    background: var(--color-brand-soft);
}

.site-nav__group .site-nav__link,
.site-nav__group .site-nav__link:hover,
.site-nav__group .site-nav__link[aria-current] {
    padding-right: var(--space-2);
    background: transparent;
}

.site-nav__group.is-active .site-nav__link {
    color: var(--color-brand-text);
}

.site-nav__toggle {
    display: inline-grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: var(--space-2);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.site-nav__group.is-active .site-nav__toggle {
    color: var(--color-brand-text);
}

.site-nav__toggle:hover {
    background: var(--color-surface);
    color: var(--color-text);
}

.site-nav__toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.site-nav__toggle i {
    transition: transform var(--transition);
}

.site-nav__toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Aufklappendes Untermenü: eine Ebene über dem Seiteninhalt, kein Teil des Seitenlayouts. */
.site-nav__submenu {
    display: none;
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 30;
    min-width: 15rem;
    max-width: calc(100vw - 2 * var(--space-4));
    margin: 0;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    list-style: none;
}

/* Mit Skript öffnet nur der Knopf; ohne Skript öffnet das Untermenü per Hover oder Tastaturfokus. */
.site-nav__group.is-open > .site-nav__submenu,
.site-nav:not(.has-menu-js) .site-nav__group:hover > .site-nav__submenu,
.site-nav:not(.has-menu-js) .site-nav__group:focus-within > .site-nav__submenu {
    display: block;
}

.site-nav__sublink {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}

.site-nav__sublink i {
    width: 1.1em;
    color: var(--color-brand);
    text-align: center;
}

.site-nav__sublink:hover,
.site-nav__sublink[aria-current="page"] {
    background: var(--color-brand-soft);
    color: var(--color-brand-text);
}

.site-nav__sublink:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.page-notice {
    margin-bottom: var(--space-5);
}

/* ---------- Listen, Karten und Formulare der Verwaltung (Kleidung, Hersteller) ---------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}

.page-header .page-title {
    margin-bottom: var(--space-1);
}

.page-header p {
    margin: 0;
}

.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Karten (mit Fotos) wachsen nur bis 380px und beginnen links; sie laufen von links nach rechts und dann in die nächste Zeile. */
.item-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(300px, 380px));
    justify-content: start;
}

.item-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
}

.item-card--stacked {
    flex-direction: column;
    align-items: stretch;
}

.item-card__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.item-card__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-brand-soft);
    color: var(--color-brand-text);
}

/* Herstellerlogo statt Symbol: gleiche Kachel, Bild eingepasst und auf hellem Grund lesbar (auch transparente Logos). */
.item-card__icon--logo {
    width: 3rem;
    height: 3rem;
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    background: #fff;
}

.item-card__icon--logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

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

.maker__logo {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-sm);
    background: #fff;
    object-fit: contain;
}

/* ---------- Farbauswahl (aufklappbar, Farbquadrate) ---------- */

.swatch-picker {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.swatch-picker__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    cursor: pointer;
    list-style: none;
}

.swatch-picker__summary::-webkit-details-marker {
    display: none;
}

.swatch-picker__summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-md);
}

.swatch-picker__current {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    font-weight: 600;
}

.swatch-picker__chevron {
    color: var(--color-muted);
    font-size: 0.8rem;
    transition: transform var(--transition);
}

.swatch-picker[open] .swatch-picker__chevron {
    transform: rotate(180deg);
}

.swatch-picker__panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.swatch-option {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
}

.swatch-option:hover {
    background: var(--color-surface-2);
}

/* Der Radio-Knopf bleibt für Tastatur und Screenreader erhalten, das Quadrat zeigt die Auswahl. */
.swatch-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.swatch__chip {
    display: block;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
}

.swatch__chip--none {
    border: 2px dashed var(--color-border);
    background: transparent;
}

.swatch-option input:checked ~ .swatch__chip {
    outline: 3px solid var(--color-brand);
    outline-offset: 2px;
}

.swatch-option input:focus-visible ~ .swatch__chip {
    outline: 3px solid var(--color-text);
    outline-offset: 2px;
}

.swatch__name {
    max-width: 100%;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
}

.swatch-picker__current .swatch__chip {
    width: 1.5rem;
    height: 1.5rem;
}

.swatch-inline {
    display: inline-flex;
}

.swatch-inline .swatch__chip {
    width: 1.25rem;
    height: 1.25rem;
}

/* ---------- Kategorie-Auswahl (aufklappbar, mit Symbolen, nach Gruppen) ---------- */

.category-panel {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.category-group {
    margin: var(--space-2) 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: var(--space-2);
}

.category-option {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: var(--space-1);
    min-width: 0;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: center;
}

.category-option:hover {
    background: var(--color-surface-2);
}

.category-option--none {
    justify-self: start;
    grid-auto-flow: column;
    align-items: center;
    gap: var(--space-3);
}

/* Der Radio-Knopf bleibt für Tastatur und Screenreader erhalten, das Symbol zeigt die Auswahl. */
.category-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.category-option__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-brand-soft);
    color: var(--color-brand-text);
}

.category-option__icon--none {
    background: transparent;
    border: 2px dashed var(--color-border);
    color: var(--color-muted);
}

.category-option input:checked ~ .category-option__icon {
    background: var(--color-brand);
    color: var(--color-on-accent);
}

.category-option input:focus-visible ~ .category-option__icon {
    outline: 3px solid var(--color-text);
    outline-offset: 2px;
}

.swatch-picker__current .category-option__icon {
    width: 2rem;
    height: 2rem;
}

/* ---------- Design: Auswahl eines Stücks mit Vorschaubild und Suche ---------- */

.piece-panel {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.piece-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-2);
    max-height: 22rem;
    overflow-y: auto;
}

.piece-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-2);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.piece-option[hidden] {
    display: none;
}

.piece-option:hover {
    background: var(--color-surface-2);
}

/* Der Radio-Knopf bleibt für Tastatur und Screenreader erhalten, der Rahmen zeigt die Auswahl. */
.piece-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.piece-option:has(input:checked) {
    border-color: var(--color-brand);
    background: var(--color-brand-soft);
}

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

.piece-option__thumb {
    display: grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-sm);
    background: var(--color-brand-soft);
    color: var(--color-brand-text);
    overflow: hidden;
}

.piece-option__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.piece-option__thumb--none {
    background: transparent;
    border: 2px dashed var(--color-border);
    color: var(--color-muted);
}

.piece-option__text {
    display: grid;
    min-width: 0;
    gap: 0.1rem;
    text-align: left;
}

.piece-option__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
    font-weight: 400;
}

.piece-option__chip {
    flex: none;
    width: 0.9rem;
    height: 0.9rem;
}

.piece-picker .swatch-picker__current .piece-option__thumb {
    width: 2.25rem;
    height: 2.25rem;
}

.piece-empty,
.piece-none-available {
    margin: 0;
}

/* ---------- Design: Formular aus getrennten Karten (Name, Oberteil, Hose, Gürtel, Schuhe, Bilder) ---------- */

/* Eine Seite, die mittig steht: Seitenblock und Überschrift zentriert. Das Formular selbst bleibt linksbündig lesbar. */
.form-page--centered {
    width: 100%;
    margin-inline: auto;
}

.form-page--centered > header {
    text-align: center;
}

.design-form {
    display: grid;
    gap: var(--space-6);
    min-width: 0;
}

.design-block {
    padding: 0;
    overflow: hidden;
}

/* Kopfbereich je Teil des Körpers: farbig abgesetzt, mit Symbol und großer Überschrift. */
.design-block__header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-brand-soft);
}

.design-block__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-brand);
    color: var(--color-on-accent);
    font-size: 1.25rem;
}

.design-block__title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.2;
}

.design-block__hint {
    margin: var(--space-1) 0 0;
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.design-block__body {
    display: grid;
    gap: 0;
    padding: var(--space-6);
}

/* Mehrere Stellen in einer Karte (die Schichten des Oberteils): durch Linien und Abstand klar getrennt. */
.design-block__body > .field + .field {
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.field__label--slot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    font-size: 1rem;
}

.slot-number {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--color-brand-soft);
    color: var(--color-brand-text);
    font-size: var(--font-size-sm);
    font-weight: 700;
}

/* ---------- Design: Übersicht ---------- */

.design-part {
    display: grid;
    gap: var(--space-3);
}

.design-part + .design-part {
    margin-top: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}

.design-part__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-brand-text);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.design-part__title .fa-solid {
    color: var(--color-brand);
}

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

.piece-line {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.piece-line__text {
    display: grid;
    flex: 1;
    min-width: 0;
}

.piece-line__slot {
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.piece-line__name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ---------- Auswahl weniger Möglichkeiten als Schaltflächen (z. B. Kurzarm / Langarm) ---------- */

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

.choice__option {
    position: relative;
    cursor: pointer;
}

/* Der Radio-Knopf bleibt für Tastatur und Screenreader erhalten, die Schaltfläche zeigt die Auswahl. */
.choice__option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.choice__option span {
    display: inline-flex;
    align-items: center;
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    font-weight: 600;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.choice__option:hover span {
    background: var(--color-surface-2);
}

.choice__option input:checked + span {
    border-color: var(--color-brand);
    background: var(--color-brand);
    color: var(--color-on-accent);
}

.choice__option input:focus-visible + span {
    outline: 3px solid var(--color-text);
    outline-offset: 2px;
}

/* ---------- Kleidung bearbeiten und löschen ---------- */

.item-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
}

/* Aktionen am rechten Rand einer einzeiligen Karte (Hersteller): nur Symbole, damit die Karte schmal bleibt. */
.item-card__actions--inline {
    flex: none;
    margin-top: 0;
    margin-left: auto;
    padding-top: 0;
}

.logo-edit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.logo-edit__image {
    width: 6rem;
    height: 6rem;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    object-fit: contain;
}

.image-edit {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.image-edit__item {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.image-edit__thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    object-fit: cover;
}

.image-edit__remove {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.consequence-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.consequence-list .fa-solid {
    margin-right: var(--space-2);
    color: var(--color-brand);
}

.consequence-list .fa-triangle-exclamation {
    color: var(--color-warning);
}

/* ---------- Bildergalerie einer Kleidungskarte ---------- */

/* Platzhalter, wenn es kein Bild gibt: gleiche Größe wie das große Bild, damit die Karten gleich aufgebaut sind. */
.gallery__placeholder {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-2);
    width: 100%;
    aspect-ratio: 4 / 3;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    color: var(--color-muted);
    font-weight: 600;
}

.gallery__placeholder .fa-solid {
    font-size: 2rem;
}


.gallery {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.gallery__main {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    object-fit: cover;
}

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

.gallery__thumb {
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    overflow: hidden;
    cursor: pointer;
}

.gallery__thumb.is-active {
    border-color: var(--color-brand);
}

.gallery__thumb:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.gallery__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.input--file {
    height: auto;
    padding: var(--space-3);
}

.item-card__body {
    min-width: 0;
}

.item-card__title {
    margin: 0;
    font-size: 1.1rem;
    overflow-wrap: anywhere;
}

.item-card__meta {
    margin: 0;
    font-size: var(--font-size-sm);
}

.item-card__text {
    margin: 0;
    overflow-wrap: anywhere;
}

.badge-row,
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: var(--space-3) var(--space-4);
    margin: 0;
}

.facts dt {
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.facts dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.15rem var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    text-align: center;
}

.empty-state__icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-md);
    background: var(--color-brand-soft);
    color: var(--color-brand-text);
    font-size: 1.75rem;
}

.empty-state__title,
.empty-state p {
    margin: 0;
}

.form-page {
    max-width: 52rem;
}

.form-page--centered {
    max-width: 48rem;
}

.form-section {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.form-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    padding: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.form-section__title i {
    color: var(--color-brand);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
    gap: var(--space-4);
}

.stack--tight {
    gap: var(--space-2);
}

/* Mittlere Breiten: engere Abstände, damit alle Menüpunkte in eine Zeile passen. */
@media (max-width: 90rem) {
    .site-nav {
        gap: var(--space-1);
        margin-left: var(--space-2);
    }

    .site-nav__link {
        padding: 0 var(--space-3);
    }
}

/* Unter etwa 1024 px nur Symbole im Menü; der Text bleibt für Screenreader erhalten. */
@media (max-width: 64rem) {
    .site-nav__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* Auf schmalen Bildschirmen nur Icons; der Text bleibt für Screenreader erhalten. */
@media (max-width: 40rem) {
    /* Menü in eigener Zeile unter Logo und Aktionen; das Untermenü richtet sich an der Menüzeile aus, nicht am Eintrag. */
    .site-header {
        padding: var(--space-3) var(--space-4);
    }

    .site-nav {
        position: relative;
        order: 3;
        flex: 1 1 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .site-nav__group {
        position: static;
    }

    .site-nav__submenu {
        right: 0;
        max-width: none;
        min-width: 0;
    }

    .site-nav__link {
        padding: 0 var(--space-3);
    }

    .site-nav__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* ---------- Passkeys ---------- */

.divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-muted);
    font-size: var(--font-size-sm);
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* Das Passkey-Zeichen ist ein SVG und wird wie ein Font-Icon dimensioniert. */
.btn__icon--mark {
    width: 1.4em;
    height: 1.4em;
    flex: none;
}

.btn--large .btn__icon--mark {
    width: 1.9em;
    height: 1.9em;
}

.card__mark {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    color: var(--color-brand);
}

.passkey-message {
    min-height: 1.25rem;
    margin: 0;
}

.passkey-message--error {
    color: var(--color-delete-text);
}

.passkey-empty {
    margin: 0;
    padding: var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-muted);
    text-align: center;
}

.passkey-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.passkey-item__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-brand-soft);
    color: var(--color-brand-text);
}

.passkey-item__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.passkey-item__body {
    display: grid;
    min-width: 0;
}

.passkey-item__name {
    overflow-wrap: anywhere;
}

.passkey-item__meta {
    font-size: var(--font-size-sm);
}

/* Entfernen klappt das Bestätigungsformular unter der Zeile auf (ohne JavaScript). */
.passkey-item__remove {
    display: contents;
}

.passkey-item__remove > summary {
    grid-column: 3;
    grid-row: 1;
    list-style: none;
    cursor: pointer;
}

.passkey-item__remove > summary::-webkit-details-marker {
    display: none;
}

.passkey-item__remove > form {
    grid-column: 1 / -1;
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

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

.passkey-add__title {
    margin: 0;
    font-size: 1.05rem;
}

@media (max-width: 30rem) {
    .passkey-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .passkey-item__remove > summary {
        grid-column: 1 / -1;
        grid-row: auto;
        justify-self: start;
    }
}

/* ---------- Allure Atelier: Seitenrahmen und redaktionelle Hierarchie ---------- */
.skip-link { position: fixed; left: var(--space-4); top: var(--space-4); z-index: 100; padding: var(--space-3); background: var(--color-surface); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.brand { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.brand__wordmark { font: 500 3.5rem/1 var(--font-display); letter-spacing: -0.07em; }
.brand__dot { color: var(--color-brand); }
.brand__caption, .nav-caption, .eyebrow { font: 600 0.65rem/1.6 var(--font-sans); letter-spacing: 0.14em; }
.brand__caption { color: var(--color-muted); font-size: 0.52rem; letter-spacing: 0.13em; }
.nav-caption { color: var(--color-muted); margin-top: var(--space-8); }
.app-shell .site-header { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--sidebar-width); flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: var(--space-4); padding: var(--space-6) var(--space-5); background: var(--color-surface); border-right: 1px solid var(--color-border); overflow-y: auto; }
.app-shell .site-nav { flex: none; flex-direction: column; flex-wrap: nowrap; gap: var(--space-2); margin: 0; }
.app-shell .site-nav__group { display: flex; flex-wrap: wrap; border-radius: var(--radius-sm); }
.app-shell .site-nav__link { min-height: 3rem; width: 100%; gap: var(--space-3); padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--font-size-sm); font-weight: 500; }
.app-shell .site-nav__link i { width: 1.25rem; text-align: center; }
.app-shell .site-nav__group .site-nav__link { flex: 1; width: auto; }
.app-shell .site-nav__toggle { min-width: 2rem; height: 2.75rem; margin: 0; }
.app-shell .site-nav__submenu { position: static; width: 100%; min-width: 0; max-width: none; border: 0; box-shadow: none; background: transparent; padding: 0 var(--space-2) var(--space-2); }
.site-nav__sublink { font-size: var(--font-size-sm); padding: 0 var(--space-3); }
.app-shell .site-nav__label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.sidebar-note { margin-top: auto; padding: var(--space-5) 0; border-top: 1px solid var(--color-border); color: var(--color-brand-text); }
.sidebar-note > i { margin-bottom: var(--space-3); }
.sidebar-note p { font: 1.15rem/1.5 var(--font-display); margin-bottom: var(--space-3); }
.sidebar-note strong { font-weight: 400; }
.sidebar-note > span { color: var(--color-muted); font-size: 0.75rem; line-height: 1.6; }
.app-shell .site-header__actions { border-top: 1px solid var(--color-border); padding-top: var(--space-4); justify-content: space-between; }
.app-shell .site-header__actions .btn { min-height: 2.5rem; font-size: 0.75rem; border: 0; }
.app-shell .page { margin: 0 0 0 var(--sidebar-width); width: calc(100% - var(--sidebar-width)); max-width: none; padding: 0 clamp(1.5rem, 4vw, 4.5rem) var(--space-6); }
.atelier-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 5rem; margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--color-muted); }
.atelier-topline__signature { font: italic 0.9rem var(--font-display); letter-spacing: 0; }
.atelier-topline__signature i { margin-left: var(--space-2); }
.page-title { font: 400 clamp(2rem, 3.3vw, 3rem)/1.15 var(--font-display); letter-spacing: -0.035em; overflow-wrap: anywhere; }
.page-header { align-items: center; gap: var(--space-5); margin-bottom: var(--space-5); }
.page-header p:last-child { margin-bottom: 0; }
.eyebrow { color: var(--color-brand-text); margin: 0 0 var(--space-3); }
.card { box-shadow: none; }
.card:hover { border-color: var(--color-border-strong); }
.btn { font-size: var(--font-size-sm); font-weight: 500; }
.item-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--space-5); }
.item-card--stacked { overflow: hidden; padding: var(--space-4); gap: var(--space-4); }
.item-card--stacked > .gallery, .item-card--stacked > .gallery__placeholder { margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) 0; border-radius: 0; }
.gallery__main { aspect-ratio: 4 / 5; object-fit: contain; background: var(--color-surface-2); border-radius: 0; }
.gallery__placeholder { aspect-ratio: 4 / 5; background: var(--color-surface-2); }
.gallery__thumbs { padding: 0 var(--space-3); }
.item-card__title { font: 400 1.5rem/1.25 var(--font-display); }
.item-card__icon { border-radius: var(--radius-sm); background: var(--color-brand-soft); }
.item-card__actions { border-top: 1px solid var(--color-border); padding-top: var(--space-4); margin-top: auto; }
.badge { font-size: 0.7rem; font-weight: 500; padding: var(--space-1) var(--space-2); }
.facts { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.facts dd { font-weight: 500; }
.item-card__text { font-size: var(--font-size-sm); }
.form-page--centered { max-width: 54rem; }
.form-section + .form-section { border-top: 1px solid var(--color-border); padding-top: var(--space-5); margin-top: var(--space-3); }
.form-section__title { padding-bottom: var(--space-3); font: 400 1.4rem var(--font-display); }
.design-block__header { background: var(--color-surface-2); }
.design-block__title { font-family: var(--font-display); font-weight: 400; }
.wardrobe-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem) auto; gap: var(--space-3); align-items: center; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.wardrobe-toolbar .muted { font-size: 0.75rem; }
.atelier-dashboard { gap: var(--space-6); }
.atelier-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 26rem; overflow: hidden; background: var(--color-hero); color: var(--color-hero-ink); border-radius: var(--radius-md); }
.atelier-hero__copy { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 3vw, 3.5rem); }
.atelier-hero h2 { font: 400 clamp(2.5rem, 4.3vw, 4.5rem)/1.05 var(--font-display); letter-spacing: -0.04em; margin: var(--space-3) 0 var(--space-5); }
.atelier-hero__copy > p:not(.eyebrow) { font-size: var(--font-size-sm); max-width: 24rem; line-height: 1.8; }
.atelier-hero .eyebrow { color: var(--color-hero-ink); }
.atelier-hero .btn { background: var(--color-hero-ink); color: var(--color-hero); border-color: var(--color-hero-ink); }
.atelier-hero .btn:hover { opacity: 0.85; }
.atelier-hero__edition { margin-top: auto; padding-top: var(--space-6); font-size: 0.55rem; letter-spacing: 0.17em; }
.atelier-hero__art { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; }
.atelier-hero__art img { display: block; width: 100%; height: auto; }
.atelier-hero__art > span { padding: 0 var(--space-4) var(--space-5); font: italic 1.1rem var(--font-display); }
.section-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-3); padding-top: var(--space-4); }
.section-heading h2 { margin: 0; font: 400 2rem var(--font-display); letter-spacing: -0.025em; }
.section-heading > span { font-size: 0.75rem; }
.atelier-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.atelier-shortcut { display: flex; flex-direction: column; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); transition: border-color var(--transition), transform var(--transition); }
.atelier-shortcut:hover { border-color: var(--color-brand); transform: translateY(-3px); }
.atelier-shortcut__number { color: var(--color-muted); font-size: 0.6rem; letter-spacing: 0.12em; }
.atelier-shortcut__icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin: var(--space-5) 0; border-radius: var(--radius-sm); background: var(--color-brand-soft); color: var(--color-brand-text); font-size: 1.2rem; }
.atelier-shortcut h3 { font: 400 1.5rem var(--font-display); }
.atelier-shortcut p { font-size: var(--font-size-sm); color: var(--color-muted); line-height: 1.8; }
.atelier-shortcut__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); font-size: 0.75rem; color: var(--color-brand-text); }
.atelier-footnote { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); border-top: 1px solid var(--color-border); padding-top: var(--space-5); color: var(--color-brand-text); }
.atelier-footnote p { flex: 1; margin: 0; font: italic 1rem var(--font-display); }
.atelier-footnote span { font-size: 0.7rem; overflow-wrap: anywhere; }
.site-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); font-size: 0.65rem; }
.app-shell .site-footer { margin-left: var(--sidebar-width); padding: var(--space-5) clamp(1.5rem, 4vw, 4.5rem); }
@media (min-width: 110rem) { .app-shell .page > section { max-width: 90rem; margin-inline: auto; } }
@media (max-width: 75rem) { :root { --sidebar-width: 13.5rem; } .atelier-shortcuts { gap: var(--space-3); } .atelier-shortcut { padding: var(--space-4); } .atelier-hero__copy { padding: var(--space-5); } }
@media (max-width: 60rem) {
    .app-shell .site-header { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--space-4) var(--space-5); gap: var(--space-3); border-right: 0; border-bottom: 1px solid var(--color-border); overflow: visible; }
    .brand__wordmark { font-size: 2.6rem; }
    .nav-caption, .sidebar-note, .brand__caption { display: none; }
    .app-shell .site-header__actions { margin-left: auto; border: 0; padding: 0; }
    .app-shell .site-nav { order: 3; flex: 1 1 100%; flex-direction: row; justify-content: space-between; gap: var(--space-1); }
    .app-shell .site-nav__link { min-height: 2.75rem; padding: 0 var(--space-2); gap: var(--space-2); font-size: 0.75rem; }
    .app-shell .site-nav__group { position: relative; }
    .app-shell .site-nav__submenu { position: absolute; top: 100%; width: 12rem; min-width: 12rem; padding: var(--space-2); background: var(--color-surface); box-shadow: var(--shadow-md); border: 1px solid var(--color-border); }
    .app-shell .page { width: 100%; margin: 0; }
    .app-shell .site-footer { margin: 0; }
    .atelier-topline { min-height: 3.5rem; }
}
@media (max-width: 42rem) {
    .app-shell .site-header { padding: var(--space-3) var(--space-4); }
    .app-shell .site-nav__label { font-size: 0.6rem; }
    .app-shell .site-nav__link { flex-direction: column; justify-content: center; gap: var(--space-1); padding: var(--space-2) var(--space-1); min-width: 2.5rem; }
    .app-shell .site-nav__toggle { display: none; }
    .app-shell .site-nav:not(.has-menu-js) .site-nav__group:focus-within > .site-nav__submenu { display: block; }
    .app-shell .site-nav__submenu { left: 0; right: auto; }
    .app-shell .page { padding-inline: var(--space-4); }
    .atelier-topline { font-size: 0.5rem; margin-bottom: var(--space-5); }
    .atelier-topline__signature { display: none; }
    .page-header { align-items: flex-start; margin-bottom: 0; }
    .page-header > .btn { width: 100%; }
    .atelier-hero { grid-template-columns: minmax(0, 1fr); }
    .atelier-hero__copy { padding: var(--space-5); }
    .atelier-hero__art { max-height: 19rem; overflow: hidden; }
    .atelier-hero__art img { width: min(100%, 28rem); }
    .atelier-hero__art > span { display: none; }
    .atelier-shortcuts { grid-template-columns: minmax(0, 1fr); }
    .atelier-shortcut { padding: var(--space-5); }
    .atelier-shortcut__icon { margin: var(--space-4) 0; }
    .wardrobe-toolbar { grid-template-columns: minmax(0, 1fr); }
    .card-grid, .form-grid { grid-template-columns: minmax(0, 1fr); }
    .atelier-footnote span { width: 100%; }
    .app-shell .site-footer { padding-inline: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* Smartphone: große Berührungsflächen, Eingaben ohne automatisches Heranzoomen. */
@media (max-width: 42rem) {
    .btn, .app-shell .site-header__actions .btn { min-height: var(--control-height); }
    .btn--icon.btn--small { width: var(--control-height); }
    .app-shell .site-nav__link { min-width: var(--control-height); }
    .input, .select, .textarea { font-size: var(--font-size-md); }
}