:root {
    --ink: #000000;
    --ink-lift: #121212;
    --ink-lift-2: #1b1b1b;
    --paper: #f2efe7;
    --rule: rgba(242, 239, 231, 0.14);
    --rule-strong: rgba(242, 239, 231, 0.28);
    --text: #f2efe7;
    --text-muted: rgba(242, 239, 231, 0.58);
    --text-faint: rgba(242, 239, 231, 0.36);
    --bg: var(--ink);
    --surface: var(--ink-lift);
    --surface-2: var(--ink-lift-2);
    /* Bewusst kein Braun/Orange mehr - gedeckter, warmer Graphiton statt
       Farbakzent, passend zum ohnehin schwarz-weiss-cremefarbenen Archiv-Look. */
    --accent: #8f897c;
    --accent-soft: rgba(143, 137, 124, 0.18);
    --accent-text: #d6d0c2;
    --focus: #8f897c;
    /* photo mount: the ground each cut-out product photo sits on */
    --mount: #000000;
    --mount-text: #f2efe7;
    --mount-rule: rgba(242, 239, 231, 0.16);
  }

  :root[data-mount="white"] {
    --mount: #ffffff;
    --mount-text: #0c0c0b;
    --mount-rule: rgba(12, 12, 11, 0.14);
  }

  * { box-sizing: border-box; }

  html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
  }

  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Ohne das vergroessert iOS Safari lange Textbloecke eigenmaechtig
       (Font-Boosting) - lief beim grossen DISORDER119-Schriftzug auf
       schmalen iPhones rechts aus dem Bildschirm heraus. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  a { color: inherit; }

  ::selection { background: var(--accent-soft); color: var(--text); }

  :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
  }

  /* ---------- Masthead ---------- */

  .masthead {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 3vw, 26px);
    padding: clamp(18px, 3vw, 30px) clamp(20px, 5vw, 64px) clamp(22px, 3vw, 32px);
    background: var(--ink);
    color: var(--paper);
    position: relative;
  }

  .masthead__top {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
  }

  .eyebrow {
    grid-column: 1;
    justify-self: start;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    line-height: 1.5;
    color: rgba(242, 239, 231, 0.6);
    max-width: 34ch;
  }

  .masthead__index {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 239, 231, 0.5);
    text-align: right;
    line-height: 1.7;
    white-space: nowrap;
  }

  .wordmark-block {
    grid-column: 2;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
  }

  .wordmark-kicker {
    margin: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: rgba(242, 239, 231, 0.5);
  }

  .wordmark {
    margin: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    font-family: "Helvetica Neue Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(2.9rem, 9vw, 5.6rem);
    line-height: 0.85;
    letter-spacing: -0.01em;
  }

  @media (max-width: 400px) {
    /* Der Mindestwert im clamp() greift ab hier, weil 9vw schon kleiner ist -
       auf sehr schmalen Handys zusaetzlich absenken, damit "DISORDER119"
       sicher nicht ueber den Bildschirmrand hinaus laeuft. */
    .wordmark { font-size: clamp(2.3rem, 12vw, 5.6rem); }
  }

  .wordmark__line {
    display: block;
    opacity: 0;
    transform: scale(0.85) translateY(0.4em);
    letter-spacing: 0.18em;
    animation: wordmark-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes wordmark-in {
    0% { opacity: 0; transform: scale(0.85) translateY(0.4em); letter-spacing: 0.18em; }
    60% { opacity: 1; }
    100% { opacity: 1; transform: scale(1) translateY(0); letter-spacing: -0.01em; }
  }

  .reveal {
    opacity: 0;
    animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  @keyframes fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .wordmark__line, .reveal {
      animation: none;
      opacity: 1;
      transform: none;
    }
    /* .wordmark__line startet mit breitem letter-spacing (Teil der
       Eintritts-Animation) - ohne diese Zeile blieb der Schriftzug bei
       aktivierter "Bewegung reduzieren"-Einstellung dauerhaft im breiten
       Startzustand haengen und lief auf schmalen Handys rechts aus dem
       Bildschirm heraus. */
    .wordmark__line { letter-spacing: -0.01em; }
  }

  .masthead__bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    border-top: 1px solid rgba(242, 239, 231, 0.18);
    padding-top: 18px;
    flex-wrap: wrap;
  }

  .masthead__meta {
    display: flex;
    gap: clamp(20px, 4vw, 48px);
    flex-wrap: wrap;
  }

  .meta-figure {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .meta-figure__value {
    font-variant-numeric: tabular-nums;
    font-size: 1.15rem;
    font-weight: 600;
  }

  .meta-figure__label {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(242, 239, 231, 0.5);
  }

  .theme-toggle {
    background: transparent;
    border: 1px solid rgba(242, 239, 231, 0.3);
    color: rgba(242, 239, 231, 0.85);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 8px 14px;
    cursor: pointer;
    font-family: inherit;
  }

  .theme-toggle:hover { border-color: rgba(242, 239, 231, 0.6); }

  /* ---------- Index / filter rail ---------- */

  .rail {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg);
    border-bottom: 1px solid var(--rule);
    padding: 14px clamp(20px, 5vw, 64px);
    display: flex;
    align-items: center;
    gap: clamp(14px, 2vw, 28px);
    flex-wrap: wrap;
  }

  .rail__search {
    position: relative;
    flex: 1 1 220px;
    min-width: 160px;
    max-width: 340px;
  }

  .rail__search input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule-strong);
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    padding: 6px 2px 8px 0;
  }

  .rail__search input::placeholder { color: var(--text-faint); }
  .rail__search input:focus { border-bottom-color: var(--accent); }

  .chip-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 2 1 auto;
  }

  .chip {
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border: 1px solid var(--rule-strong);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
  }

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

  .chip[aria-pressed="true"] {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
  }

  .rail__right {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
  }

  .rail__count {
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
  }

  /* iOS Safari rendert <select> sonst mit eigenem, stark abgerundetem
     Systemstil (dicke graue Pille) statt der eckigen Optik des restlichen
     Archivs - appearance:none plus ein selbst gezeichneter Pfeil sorgen
     dafuer, dass es auf allen Plattformen gleich aussieht. */
  .rail__sort,
  .filter-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999691' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border-radius: 0;
  }

  .rail__sort {
    background-color: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 7px 26px 7px 10px;
    cursor: pointer;
  }

  #moreFiltersToggle[aria-expanded="true"] {
    border-color: var(--accent);
    color: var(--accent-text);
  }

  .filter-panel {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    align-items: end;
    padding: 16px clamp(20px, 5vw, 64px) 0;
    margin-top: 4px;
    border-top: 1px solid var(--rule);
  }

  .filter-panel.hidden { display: none; }

  .filter-field { display: flex; flex-direction: column; gap: 6px; }

  .filter-field label {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .filter-field select,
  .filter-price-inputs input {
    background-color: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--text);
    font-family: inherit;
    font-size: 0.78rem;
    padding: 8px 8px;
  }

  .filter-field select { padding-right: 26px; }

  .filter-price-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-faint);
  }
  .filter-price-inputs input { width: 100%; min-width: 0; }

  .filter-reset {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    padding: 8px 0;
    justify-self: start;
  }
  .filter-reset:hover { color: var(--accent-text); }

  /* Aktive Filter bleiben auch bei eingeklapptem Filterpanel sichtbar.
     Ausschliesslich Teil des klassischen Archiv-Rails; geschuetzte Modi
     verwenden diese Elemente nicht. */
  .active-filter-row {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .active-filter-row.hidden { display: none; }
  .active-filter-row .chip {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.68rem;
    padding: 5px 9px;
  }
  .active-filter-clear {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.68rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 5px 2px;
  }
  .active-filter-clear:hover { color: var(--accent-text); }
  .filter-field select option:disabled { color: var(--text-faint); }

  /* Das Dropdown-Popup rendert der Browser mit eigenem (meist weissem)
     Hintergrund, unabhaengig vom transparenten <select> - ohne das hier
     waren die Optionen (helle Schrift fuers dunkle Theme) darauf fast
     unlesbar. Gilt fuer alle <select>-Felder, nicht nur die Sortierung -
     "Weitere Filter" (Marke/Groesse/Farbe/Zustand) hatte denselben Fehler. */
  .rail__sort option,
  .filter-field select option {
    background: var(--ink);
    color: var(--paper);
  }

  .masthead__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 12px;
  }

  .lang-switch {
    display: flex;
    gap: 2px;
    border: 1px solid rgba(242, 239, 231, 0.3);
  }

  .lang-switch__btn {
    background: transparent;
    border: none;
    color: rgba(242, 239, 231, 0.6);
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 6px 8px;
    cursor: pointer;
  }

  .lang-switch__btn:hover { color: var(--paper); }

  .lang-switch__btn[aria-current="true"] {
    background: var(--accent);
    color: var(--ink);
  }

  /* Schwebender runder Warenkorb-Button - erscheint nur, wenn der Warenkorb
     nicht leer ist (siehe updateCartCount). Bleibt ueber allen Ansichten an
     derselben Stelle, deshalb ein eigenstaendiges position:fixed-Element statt
     Teil der Kopfzeile. */
  .cart-bag {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--ink);
    border: 1px solid var(--rule-strong);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    z-index: 310;
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .cart-bag--visible {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
  }

  /* Ausnahme vom "immer ueber allen Ansichten sichtbar"-Prinzip oben: der
     Outfit-Baukasten hat in seiner eigenen Fusszeile bereits einen
     vollwertigen "In den Warenkorb"-Button, der auf schmaleren/nicht
     maximierten Fenstern (Handy UND normal grosse Desktop-Fenster, nicht
     nur sehr kleine) bis unter den schwebenden Warenkorb-Button reicht -
     verifiziert per getBoundingClientRect(): beide Elemente ueberlappten
     sich dort tatsaechlich, der Kreis-Button lag sichtbar auf dem Text von
     "In den Warenkorb"/"Gesamt". Da der Baukasten ohnehin einen eigenen,
     klar sichtbaren Kaufbutton hat, ist der schwebende zweite hier
     schlicht ueberfluessig - einfacher und robuster, ihn dort ganz
     auszublenden, als die Fusszeile fuer jede Fenstergroesse neu gegen ihn
     abzugrenzen. #outfitView und .cart-bag sind direkte Geschwister von
     <body>, das funktioniert daher rein per CSS-Selektor. */
  .outfit-view:not(.hidden) ~ .cart-bag {
    display: none;
  }

  .cart-bag:hover { border-color: var(--accent); }

  .cart-bag svg { display: block; width: 26px; height: auto; }
  /* Das Symbol hat im HTML stroke="#fff" - in der weissen Ansicht ist der
     Knopf aber weiss. Deshalb immer in der Textfarbe zeichnen. */
  .cart-bag { color: var(--text); }
  .cart-bag svg g { stroke: currentColor; }

  .cart-bag__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
  }

  /* ---------- Grid ---------- */

  .grid-wrap {
    padding: clamp(20px, 4vw, 40px) clamp(20px, 5vw, 64px) clamp(60px, 8vw, 100px);
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: clamp(28px, 3vw, 46px) clamp(18px, 2.2vw, 28px);
  }

  .plate {
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
  }

  /* Gestaffelter Einstieg der ersten Karten beim allerersten Seitenaufbau -
     s. render() in JS, wo nur idx<16 des ersten Renders diese Klassen bekommen. */
  .plate.plate--enter {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .plate.plate--enter.plate--in { opacity: 1; transform: none; }

  @media (prefers-reduced-motion: reduce) {
    .plate.plate--enter { opacity: 1; transform: none; transition: none; }
  }

  .plate__frame {
    position: relative;
    aspect-ratio: 3 / 4;
    background: var(--mount);
    overflow: hidden;
  }

  .plate__frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    padding: 8%;
    display: block;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .plate:hover .plate__frame img { transform: scale(1.035); }

  .plate__sold-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--mount);
    color: var(--mount-text);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    padding: 7px 0;
    opacity: 0.92;
    border-top: 1px solid var(--mount-rule);
  }

  .plate__estimate-badge {
    position: absolute;
    left: 8px;
    top: 8px;
    background: var(--accent);
    color: #17110a;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 8px;
    z-index: 2;
  }

  .plate__cart-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--mount-rule);
    background: var(--mount);
    color: var(--mount-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, background 0.15s ease;
  }

  .plate__cart-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(201, 138, 69, 0.35);
  }

  .plate__cart-btn--active {
    background: var(--accent);
    color: #17110a;
    border-color: var(--accent);
  }

  .plate__body {
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .plate__brand {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem;
    color: var(--text);
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    width: fit-content;
  }
  .plate__brand:hover, .plate__brand:focus-visible { color: var(--accent-text); text-decoration: underline; }

  .plate__title {
    font-size: 0.86rem;
    line-height: 1.32;
    color: var(--text-muted);
    text-wrap: balance;
  }

  .plate__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 6px;
  }

  .plate__price {
    font-variant-numeric: tabular-nums;
    font-size: 0.92rem;
    font-weight: 700;
    transition: color 0.2s ease;
  }

  .plate:hover .plate__price { color: var(--accent-text); }

  .plate__size {
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .empty-state {
    display: none;
    padding: 80px 20px;
    text-align: center;
    color: var(--text-muted);
  }

  .empty-state.visible { display: block; }

  .empty-state__title {
    font-size: 1.1rem;
    margin-bottom: 6px;
  }

  /* ---------- Modal ---------- */

  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 7, 0.72);
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 4vw, 48px);
    z-index: 50;
  }

  .modal-backdrop.open { display: flex; }

  .modal {
    background: var(--surface);
    color: var(--text);
    max-width: 920px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border: 1px solid var(--rule-strong);
  }

  @media (max-width: 720px) {
    .modal { grid-template-columns: 1fr; }
  }

  .modal__media {
    position: relative;
    background: var(--mount);
  }

  .modal__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    padding: 6%;
    display: block;
    max-height: 88vh;
  }

  .modal__panel {
    padding: clamp(22px, 3vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
  }

  .modal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: transparent;
    color: var(--mount-text);
    border: 1px solid var(--mount-rule);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
  }

  .modal__share {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 34px;
    height: 34px;
    background: transparent;
    color: var(--mount-text);
    border: 1px solid var(--mount-rule);
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    z-index: 2;
  }

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

  .modal__share-toast {
    position: absolute;
    top: 52px;
    left: 10px;
    background: var(--mount);
    color: var(--mount-text);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    padding: 6px 10px;
    border: 1px solid var(--mount-rule);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 2;
  }

  .modal__share-toast.visible { opacity: 1; }

  .modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: transparent;
    color: var(--mount-text);
    border: 1px solid var(--mount-rule);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
  }

  .modal__nav:hover { border-color: var(--accent); color: var(--accent); }
  .modal__nav[disabled] { opacity: 0.25; cursor: default; }
  .modal__nav[disabled]:hover { border-color: var(--mount-rule); color: var(--mount-text); }
  .modal__nav--prev { left: 10px; }
  .modal__nav--next { right: 10px; }

  .modal__counter {
    position: absolute;
    bottom: 12px;
    left: 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 0.72rem;
    color: var(--mount-text);
    opacity: 0.7;
  }

  .modal__dots {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 5px;
    max-width: 60%;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .modal__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mount-text);
    opacity: 0.28;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .modal__dot[aria-current="true"] {
    opacity: 1;
    background: var(--accent);
  }

  .modal__eyebrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
  }

  .modal__title {
    font-size: 1.35rem;
    line-height: 1.25;
    text-wrap: balance;
  }

  .modal__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
    padding: 14px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

  .fact__label {
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .fact__value {
    font-size: 0.9rem;
    margin-top: 2px;
  }

  .modal__price {
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    font-weight: 700;
  }

  .modal__price--sold {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .modal__desc {
    font-size: 0.88rem;
    line-height: 1.62;
    color: var(--text-muted);
    white-space: pre-line;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
  }

  .modal__note {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
  }

  .cart-cta {
    background: var(--text);
    color: var(--bg);
    border: none;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 13px 16px;
    cursor: pointer;
    width: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }

  .cart-cta:not([disabled]):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(201, 138, 69, 0.28);
  }

  .cart-cta--active {
    background: var(--accent);
    color: #17110a;
  }

  .cart-cta[disabled] {
    background: var(--rule-strong);
    color: var(--text-faint);
    cursor: default;
  }

  /* ---------- Warenkorb ---------- */

  .cart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 7, 0.72);
    display: none;
    justify-content: flex-end;
    /* War 60 - lag damit UNTER der fixen Kopfzeile (.mode-rail, 300) und
       das Schubladen-Kopfteil (Titel + Schliessen-X, jetzt auch das
       Warenkorb-Symbol) verschwand komplett dahinter. Menue/Konto nutzen
       schon 420 fuer dasselbe Muster - hier angeglichen. */
    z-index: 420;
  }

  .cart-backdrop.open { display: flex; }

  .cart-drawer {
    background: var(--surface);
    color: var(--text);
    width: min(420px, 100%);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--rule-strong);
  }

  .cart-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px clamp(18px, 3vw, 28px);
    border-bottom: 1px solid var(--rule);
    position: relative;
  }

  .cart-drawer__brand {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .cart-drawer__brand-icon {
    width: 34px;
    height: auto;
    color: var(--text);
    flex: 0 0 auto;
  }

  .cart-drawer__head h2 {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .cart-drawer__head .modal__close {
    position: static;
    color: var(--text);
    border-color: var(--rule-strong);
  }

  .cart-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px clamp(18px, 3vw, 28px);
  }

  .cart-line {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule);
  }

  .cart-line__frame {
    width: 82px;
    height: 108px;
    flex: 0 0 auto;
    background: var(--mount);
    overflow: hidden;
  }

  .cart-line__frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    padding: 8%;
    display: block;
  }

  .cart-line__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .cart-line__title {
    font-size: 0.92rem;
    line-height: 1.35;
    font-weight: 600;
  }

  .cart-line__brand {
    font-size: 0.66rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .cart-line__meta {
    font-size: 0.72rem;
    color: var(--text-muted);
  }

  .cart-line__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
  }

  .cart-line__price {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.88rem;
  }

  .cart-line__remove {
    background: transparent;
    border: none;
    color: var(--text-muted);
    text-decoration: underline;
    font-size: 0.72rem;
    cursor: pointer;
    font-family: inherit;
  }

  .cart-removed-notice {
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--accent-text);
    border: 1px solid var(--accent);
    padding: 10px 12px;
    margin: 0 0 14px;
  }

  .cart-empty {
    padding: 60px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.86rem;
  }

  .cart-drawer__foot {
    border-top: 1px solid var(--rule);
    padding: clamp(16px, 3vw, 24px) clamp(18px, 3vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .cart-total {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 4px;
  }

  /* Zwischensumme und Versand stehen ueber dem Gesamtpreis, bleiben aber
     optisch zurueck - gefettet wird nur die Zahl, die wirklich bezahlt wird. */
  .cart-total--line {
    font-size: 0.86rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-bottom: 0;
  }

  /* Warenkorb: die ganze Schublade scrollt, damit alle Stuecke sauber
     untereinander stehen. Kopf oben und Kassen-Leiste unten bleiben stehen. */
  .cart-drawer { overflow-y: auto; overscroll-behavior: contain; }
  .cart-drawer__head { position: sticky; top: 0; z-index: 2; background: var(--surface); }
  .cart-drawer__body { flex: 0 0 auto; overflow: visible; }
  .cart-drawer__foot { flex: 0 0 auto; }
  /* Die grosse Gesamtzeile steht in der Kassen-Leiste - hier nicht doppelt. */
  .cart-drawer__foot > .cart-total:not(.cart-total--line) { display: none; }
  .cart-drawer__kasse {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px clamp(18px, 3vw, 28px) calc(14px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--rule-strong);
  }
  .cart-drawer__kasse[hidden] { display: none; }
  .cart-kasse__summe { flex: 1; display: grid; gap: 2px; min-width: 0; }
  .cart-kasse__summe span { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
  .cart-kasse__summe small { font-size: 0.68rem; letter-spacing: normal; text-transform: none; }
  .cart-kasse__summe strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
  .cart-kasse__btn {
    flex: 0 0 auto;
    padding: 14px 22px;
    background: var(--text);
    color: var(--ink);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--text);
  }
  .cart-kasse__btn:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
  /* Anfrage per Mail ist jetzt der zweite Weg: schlichter Rahmen statt Flaeche. */
  .cart-drawer__foot .cart-checkout-btn { background: transparent; color: var(--text); border: 1px solid var(--rule-strong); }


  .cart-checkout-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--text);
    color: var(--bg);
    border: none;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 13px 16px;
    cursor: pointer;
    text-decoration: none;
  }

  .cart-checkout-btn--whatsapp { background: #25d366; color: #062012; }
  .cart-checkout-btn--email { background: transparent; color: var(--text); border: 1px solid var(--rule-strong); }

  .cart-note {
    font-size: 0.7rem;
    color: var(--text-faint);
    line-height: 1.5;
  }

  .cart-config-warning {
    font-size: 0.7rem;
    color: var(--accent);
    border: 1px solid var(--accent-soft);
    padding: 10px 12px;
    line-height: 1.5;
  }

  /* ---------- Footer ---------- */

  .footer {
    border-top: 1px solid var(--rule);
    padding: clamp(24px, 4vw, 40px) clamp(20px, 5vw, 64px) clamp(30px, 5vw, 48px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--text-faint);
    font-size: 0.74rem;
    letter-spacing: 0.02em;
  }

  .footer strong { color: var(--text-muted); font-weight: 600; }

  .footer__legal {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .footer__legal button, .footer__legal a {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-faint);
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
  }

  .footer__legal button:hover, .footer__legal a:hover { color: var(--text-muted); }

  /* ---------- Rechtliches (Impressum / AGB / Datenschutz) ---------- */

  .legal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 7, 0.78);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(16px, 4vw, 60px) clamp(14px, 3vw, 20px);
    z-index: 400;
    overflow-y: auto;
  }

  .legal-backdrop.open { display: flex; }

  .legal-panel {
    background: var(--surface);
    color: var(--text);
    width: min(640px, 100%);
    border: 1px solid var(--rule-strong);
    padding: clamp(24px, 4vw, 40px);
    position: relative;
  }

  .legal-panel__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
  }

  .legal-panel h2 {
    font-family: "Helvetica Neue Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.5rem;
    margin-bottom: 18px;
    padding-right: 40px;
  }

  .legal-panel h3 {
    font-size: 0.9rem;
    margin: 20px 0 6px;
    color: var(--text);
  }

  .legal-panel p, .legal-panel li {
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text-muted);
  }

  .legal-panel ul { padding-left: 18px; margin: 6px 0; }
  .legal-panel a { color: var(--accent); }

  /* Echte, serverseitig gerenderte Seiteninhalte (Impressum/AGB/Datenschutz/
     FAQ/Ueber-uns) - dieselbe Typografie wie das JS-Schnellansicht-Panel
     (.legal-panel), aber als normaler Seiteninhalt statt fixiertes Overlay,
     damit /impressum/ usw. auch ohne JavaScript den echten Text zeigen. */
  .static-page {
    display: flex;
    justify-content: center;
    padding: clamp(24px, 6vw, 64px) clamp(16px, 4vw, 24px);
  }
  .static-page .legal-panel {
    position: static;
    max-width: 640px;
  }

  .cookie-note {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 350;
    max-width: 460px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    padding: 16px 18px;
    display: none;
    flex-direction: column;
    gap: 10px;
  }

  .cookie-note.visible { display: flex; }

  .cookie-note p {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--text-muted);
  }

  .cookie-note__actions {
    display: flex;
    justify-content: flex-end;
  }

  .cookie-note__actions button {
    background: var(--text);
    color: var(--bg);
    border: none;
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 9px 16px;
    cursor: pointer;
  }

  .hidden { display: none !important; }

  /* ---------- Ansicht-Auswahl (bei jedem Besuch) ---------- */

  /* ---------- Moduswechsel (linke Navigation) ---------- */

  /* Moduswechsel als schmale Tab-Leiste oben, fest ueber der ganzen Seite
     (statt der frueheren fixierten linken Spalte, die dauerhaft Platz
     wegnahm und sich ueber die erste Produktspalte legte). Fest positioniert
     UND mit hoeherem z-index als Match/Chaos/Baukasten (z-index 250), damit
     man auch WAEHREND dieser Vollbild-Modi direkt in einen anderen wechseln
     kann, statt vorher jedes Mal ueber "Zum Archiv" zurueckspringen zu
     muessen - der eigentliche Verbesserungs-Teil dieser Aenderung. */
  :root { --rail-h: 46px; }

  body { padding-top: var(--rail-h); }

  .mode-rail {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--rail-h);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--ink);
    border-bottom: 1px solid var(--rule-strong);
    padding: 0 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(0);
    transition: transform 0.28s ease;
  }

  .mode-rail.rail-hidden { transform: translateY(-100%); }

  .mode-rail::-webkit-scrollbar { display: none; }

  .mode-rail.hidden { display: none; }

  .mode-rail__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--text-muted);
    font-family: inherit;
    padding: 7px 14px;
    cursor: pointer;
    white-space: nowrap;
    flex: 0 0 auto;
    text-decoration: none;
  }

  .mode-rail__btn:hover { color: var(--text); border-color: var(--text-muted); }

  .mode-rail__btn[aria-current="true"] {
    color: var(--accent-text);
    border-color: var(--accent);
    background: var(--accent-soft);
  }

  .mode-rail__icon {
    font-size: 0.95rem;
    line-height: 1;
  }

  .mode-rail__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  @media (max-width: 480px) {
    /* Auf sehr schmalen Handys reichen die Icons allein, damit alle vier
       Modi ohne Scrollen in die Leiste passen. */
    .mode-rail__label { display: none; }
    .mode-rail__btn {
      width: 36px;
      height: 36px;
      padding: 0;
      justify-content: center;
    }
    .mode-rail__icon {
      width: 16px;
      height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  /* ---------- Einmaliger Hinweis auf die Fun-Modi (Match/Chaos/Baukasten) ----------
     Seit dem Direkteinstieg ins Archiv ist die Moduswechsel-Leiste die einzige
     Tuer zu diesen Modi und leicht zu uebersehen (schmale Leiste/Icon-Bar).
     Dieser Callout erscheint nur beim allerersten Besuch (localStorage-Flag),
     JS setzt Position + Pfeilrichtung passend zur aktuellen Leisten-Ausrichtung. */
  .mode-rail-hint {
    position: fixed;
    z-index: 281;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 220px;
    background: var(--accent);
    color: var(--ink);
    border: 1px solid var(--ink);
    padding: 9px 10px 9px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
  }

  .mode-rail-hint.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .mode-rail-hint.hidden { display: none; }

  .mode-rail-hint__close {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--ink);
    font-size: 0.8rem;
    line-height: 1;
    padding: 2px;
    cursor: pointer;
    opacity: 0.7;
  }

  .mode-rail-hint__close:hover { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .mode-rail-hint { transition: none; }
  }

  /* ---------- Swipe-Minigame ---------- */

  .swipe-view {
    position: fixed;
    top: var(--rail-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 250;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 20px;
    overflow: hidden;
  }

  .swipe-view__progress {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 239, 231, 0.5);
    font-variant-numeric: tabular-nums;
  }

  .swipe-card {
    position: relative;
    width: min(320px, 82vw);
    background: var(--mount);
    border: 1px solid var(--mount-rule);
    display: flex;
    flex-direction: column;
    cursor: grab;
    touch-action: pan-y;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.35s ease;
    user-select: none;
  }

  .swipe-card.dragging { transition: none; cursor: grabbing; }
  .swipe-card.fly-left { transform: translate(-140%, -10%) rotate(-18deg) !important; opacity: 0; }
  .swipe-card.fly-right { transform: translate(140%, -10%) rotate(18deg) !important; opacity: 0; }

  .swipe-card__frame {
    aspect-ratio: 3 / 4;
    background: var(--mount);
    position: relative;
    overflow: hidden;
  }

  .swipe-card__frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    padding: 8%;
    display: block;
    pointer-events: none;
  }

  .swipe-card__tag {
    position: absolute;
    top: 16px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border: 2px solid;
    border-radius: 3px;
    opacity: 0;
    transform: rotate(-8deg);
    z-index: 2;
  }

  .swipe-card__tag--like { left: 16px; color: #6fbf73; border-color: #6fbf73; }
  .swipe-card__tag--nope { right: 16px; color: #c9645f; border-color: #c9645f; transform: rotate(8deg); }

  .swipe-card__zones {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 1;
  }

  .swipe-card__zone { flex: 1; }

  .swipe-card__dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    gap: 5px;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
  }

  .swipe-card__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--mount-text);
    opacity: 0.32;
  }

  .swipe-card__dot--active { opacity: 1; background: var(--accent); }

  .swipe-card__body {
    padding: 16px 18px 20px;
    color: var(--text);
  }

  .swipe-card__brand {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.72rem;
    color: var(--text-muted);
  }

  .swipe-card__title { font-size: 0.92rem; margin-top: 3px; }

  .swipe-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 8px;
  }

  .swipe-card__price {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
  }

  .swipe-card__size {
    font-size: 0.78rem;
    color: var(--text-faint);
  }

  .swipe-view__actions {
    display: flex;
    gap: 22px;
  }

  .swipe-btn {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 1px solid rgba(242, 239, 231, 0.3);
    background: transparent;
    color: var(--paper);
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, border-color 0.15s ease;
  }

  .swipe-btn:hover { transform: scale(1.08); }
  .swipe-btn--nope:hover { border-color: #c9645f; color: #c9645f; }
  .swipe-btn--like:hover { border-color: #6fbf73; color: #6fbf73; }

  .swipe-view__hint {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: rgba(242, 239, 231, 0.4);
  }

  .swipe-summary {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 340px;
  }

  .swipe-summary__count {
    font-family: "Helvetica Neue Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 800;
    font-size: clamp(2.4rem, 10vw, 4rem);
  }

  .swipe-summary__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
  }

  .view-enter-btn {
    display: inline-block;
    background: transparent;
    border: 1px solid rgba(242, 239, 231, 0.3);
    color: var(--paper);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 12px 22px;
    cursor: pointer;
    text-decoration: none;
  }

  .view-enter-btn:hover { border-color: var(--accent); }

  /* ---------- Universum (frueher Chaos-Ansicht) ---------- */

  .chaos-view {
    position: fixed;
    top: var(--rail-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 250;
    background: var(--ink);
    overflow: hidden;
  }

  .chaos-screen {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  /* Eine Zeichenflaeche ueber die ganze Ansicht. Ohne touch-action:none
     wuerde der Browser Wischen und Zwei-Finger-Zoom selbst verarbeiten
     (Seite scrollen oder vergroessern), statt sie ans Universum zu geben. */
  .chaos-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
    cursor: grab;
    outline: none;
  }
  .chaos-sky.is-dragging { cursor: grabbing; }
  .chaos-sky.is-over-item { cursor: pointer; }
  .chaos-sky:focus-visible { box-shadow: inset 0 0 0 1px var(--accent-text); }
  .chaos-view--game .chaos-sky { cursor: none; }

  /* Unsichtbare Knoepfe ueber den groessten sichtbaren Teilen - fuer
     Tastatur und Screenreader. Beruehrungen gehen durch sie hindurch ans
     Universum (pointer-events:none), per Tastatur sind sie normal bedienbar. */
  #chaosItems {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .chaos-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: transparent;
    pointer-events: none;
    will-change: transform;
  }
  .chaos-item:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }

  .chaos-hint {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: calc(108px + env(safe-area-inset-bottom, 0px));
    z-index: 3;
    margin: 0;
    text-align: center;
    pointer-events: none;
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    line-height: 1.7;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--accent-text);
    transition: opacity 0.6s ease;
  }
  .chaos-hint.is-gone { opacity: 0; }

  /* Kurze Vorschau (Marke/Titel/Preis) beim Ueberfahren mit der Maus */
  .chaos-tooltip {
    position: fixed;
    z-index: 3;
    background: var(--ink);
    border: 1px solid var(--rule-strong);
    padding: 8px 12px;
    font-size: 0.7rem;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    white-space: nowrap;
    transform: translate(-50%, -100%);
  }
  .chaos-tooltip.visible { opacity: 1; }
  .chaos-tooltip__brand {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-size: 0.62rem;
  }
  .chaos-tooltip__price { color: var(--accent-text); font-weight: 700; }

  /* Leiste unten: das Teil in der Bildmitte und "Mischen". Am grossen
     Bildschirm mittig auf hoechstens 640 px, am Handy ueber die ganze Breite. */
  .chaos-view__actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    gap: 10px;
    align-items: stretch;
    padding: 28px max(16px, calc((100% - 640px) / 2)) calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(rgba(0, 0, 0, 0), var(--ink) 42%);
  }
  /* Zurueck ins Archiv geht ueber die Kopfzeile; in der Leiste zaehlt Platz. */
  .chaos-view__actions [data-enter-classic] { display: none; }

  .chaos-focus {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--paper);
    background: var(--ink-lift, #121212);
    border: 1px solid var(--rule-strong);
    padding: 10px 12px;
    transition: border-color 0.2s ease;
  }
  .chaos-focus:hover { border-color: var(--accent-text); }
  .chaos-focus:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
  .chaos-focus.is-empty { cursor: default; }
  .chaos-focus.is-empty:hover { border-color: var(--rule-strong); }
  .chaos-focus__brand {
    min-height: 1.1em;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .chaos-focus__title {
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .chaos-focus.is-empty .chaos-focus__title { color: var(--text-muted); font-weight: 400; }
  .chaos-focus__meta {
    min-height: 1.2em;
    font-size: 0.8rem;
    color: var(--accent-text);
    font-variant-numeric: tabular-nums;
  }
  .chaos-focus.is-swap .chaos-focus__brand,
  .chaos-focus.is-swap .chaos-focus__title,
  .chaos-focus.is-swap .chaos-focus__meta { animation: chaos-focus-in 0.28s ease; }
  @keyframes chaos-focus-in { from { opacity: 0.25; } to { opacity: 1; } }

  #chaosShuffle {
    flex: none;
    width: 66px;
    padding: 36px 4px 10px;
    background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='square'%3E%3Cpath d='M3 7h4l10 10h4M17 17l3-3M17 17l3 3M3 17h4l3-3M14 10l3-3h4M17 7l3-3M17 7l3 3'/%3E%3C/svg%3E") no-repeat center 11px / 22px 22px;
    color: var(--ink);
    border: 0;
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
  }
  #chaosShuffle:hover { filter: brightness(0.9); }
  #chaosShuffle:active { transform: scale(0.96); }
  #chaosShuffle:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }

  /* ---------- Warp-Jagd (geheimes Minigame im Universum) ---------- */

  .chaos-game {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
  }
  .chaos-game[hidden] { display: none; }
  .chaos-view--game .chaos-view__actions,
  .chaos-view--game .chaos-hint { display: none; }
  .chaos-view--game-over .chaos-game__keys { display: none; }

  .chaos-game__hud {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
  }
  .chaos-game__stat {
    display: grid;
    gap: 1px;
    min-width: 88px;
    padding: 8px 12px;
    text-align: center;
    background: rgba(10, 10, 9, 0.72);
    border: 1px solid var(--rule-strong);
  }
  .chaos-game__label {
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .chaos-game__stat strong {
    font-size: 1.15rem;
    color: var(--paper);
    font-variant-numeric: tabular-nums;
  }
  .chaos-game__banner {
    position: absolute;
    left: 0;
    right: 0;
    top: 36%;
    margin: 0;
    text-align: center;
    font-size: clamp(3rem, 12vw, 7rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--paper);
    text-shadow: 0 0 40px rgba(255, 196, 84, 0.35);
  }
  .chaos-game__keys {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    text-align: center;
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .chaos-game__result {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100% - 32px));
    display: grid;
    gap: 8px;
    padding: 22px 20px 20px;
    text-align: center;
    pointer-events: auto;
    background: var(--ink-lift, #121212);
    border: 1px solid var(--rule-strong);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  }
  .chaos-game__result[hidden] { display: none; }
  .chaos-game__eyebrow {
    margin: 0;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #ffc454;
  }
  .chaos-game__title { margin: 0; font-size: 1.5rem; line-height: 1.15; text-wrap: balance; }
  .chaos-game__line { margin: 0; font-size: 0.95rem; color: var(--paper); }
  .chaos-game__best { margin: 0; font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .chaos-game__find {
    display: grid;
    gap: 2px;
    margin-top: 4px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: var(--paper);
    background: var(--ink);
    border: 1px solid var(--rule-strong);
  }
  .chaos-game__find[hidden] { display: none; }
  .chaos-game__find:hover { border-color: #ffc454; }
  .chaos-game__find:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
  .chaos-game__find-label {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #ffc454;
  }
  .chaos-game__find-text { font-size: 0.86rem; font-weight: 700; }
  .chaos-game__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 6px;
  }
  .chaos-game__actions .view-enter-btn { background: var(--ink); }
  .chaos-game__actions #chaosGameAgain { background: var(--paper); color: var(--ink); border-color: var(--paper); }

  @media (prefers-reduced-motion: reduce) {
    .chaos-hint,
    .chaos-focus { transition: none; }
    .chaos-focus.is-swap .chaos-focus__brand,
    .chaos-focus.is-swap .chaos-focus__title,
    .chaos-focus.is-swap .chaos-focus__meta { animation: none; }
  }

  /* ---------- Outfit-Baukasten ---------- */

  .outfit-view {
    position: fixed;
    top: var(--rail-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 250;
    background: var(--ink);
    color: var(--paper);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(12px, 2.4vh, 24px) 18px clamp(10px, 2vh, 18px);
    /* Muss IMMER exakt in die Fensterhoehe passen, nie scrollen - auch nicht
       in kleinen Fenstern. Der fruehere "overflow-y:auto"-Kompromiss kam nur
       zustande, weil .outfit-layout mit flex-wrap:wrap + fehlendem
       flex:1 1 auto auf .outfit-main NICHT korrekt auf die verfuegbare Hoehe
       gestaucht wurde (Browser-Eigenheit: bei einzeiligem, aber wrap-
       faehigem Flex-Layout wird beim Stretch teils die urspruengliche
       Content-Groesse statt der tatsaechlich zugewiesenen Zeilenhoehe
       verwendet). Mit flex-wrap:nowrap unten UND .outfit-main{flex:1 1 auto}
       greift der min-height:0-Kettenmechanismus korrekt durch die gesamte
       Kette (outfit-layout -> outfit-main/-figure -> outfit-stack/-figure__stage),
       live verifiziert auf disorder119.com ohne jeden Overflow. */
    overflow: hidden;
    gap: clamp(6px, 1.4vh, 14px);
  }

  .outfit-view__close {
    position: absolute;
    top: clamp(10px, 2vh, 16px);
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    flex: 0 0 auto;
  }

  .outfit-view__close:hover { border-color: var(--accent); color: var(--accent); }

  .outfit-view__head { text-align: center; flex: 0 0 auto; }

  .outfit-view__eyebrow {
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 239, 231, 0.5);
  }

  .outfit-view__title {
    font-family: "Helvetica Neue Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.2rem, 3.4vh, 2.4rem);
    margin-top: 2px;
  }

  .outfit-view__status {
    font-size: 0.7rem;
    color: var(--accent);
    margin-top: 3px;
    min-height: 1.1em;
  }


  .outfit-layout {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(14px, 2.4vw, 32px);
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 840px;
    flex: 1 1 auto;
    min-height: 0;
  }

  .outfit-main {
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1.2vh, 12px);
    width: min(360px, 100%);
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Gleiche Breite wie .outfit-main (die Liste bei "Oberteil") - vorher
     bei 300px gedeckelt, wodurch der Look-Board-Kasten sichtbar schmaler
     als die Liste daneben wirkte, obwohl er das eigentliche visuelle
     Ergebnis zeigt und mindestens genauso viel Platz verdient. */
  .outfit-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: min(360px, 100%);
    flex: 1 1 auto;
    min-height: 0;
  }

  .outfit-figure__label {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    text-align: center;
  }

  .outfit-figure__stage {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    background: radial-gradient(120% 85% at 50% 15%, var(--surface-2) 0%, var(--ink) 70%);
    border: 1px solid var(--rule-strong);
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-rows: minmax(0, 1fr);
    grid-auto-flow: row dense;
    gap: clamp(3px, 0.7vh, 7px);
    padding: clamp(3px, 0.7vh, 7px);
  }

  .outfit-figure__empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 18%;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--text-faint);
    transition: opacity 0.2s ease;
  }

  .outfit-figure__empty.hidden-empty { opacity: 0; pointer-events: none; }

  /* Zwei fruehere Ansaetze haben sich als Sackgasse erwiesen: (1) lose
     gestreutes, einzeln rotiertes Moodboard (Jacke oben-links, Top mittig,
     Hose winzig und schraeg dazwischen, Schuhe unten-links) wirkte wie
     zufaellig hingeworfene Einzelteile statt wie ein Outfit. (2) der
     Versuch, daraus per Ueberlappung eine "echte Silhouette" zu bauen
     (Jacke HINTER Top an derselben Stelle, Bottom ueberlappend an der
     Taille) schlug fehl, weil die Look-Fotos einzeln fotografierte,
     rechteckige Bilder mit UNDURCHSICHTIGEM (nicht transparentem)
     dunklem Hintergrund sind - beim Uebereinanderlegen entsteht dadurch
     immer eine sichtbare rechteckige Kante/Naht statt eines nahtlosen
     Uebergangs, egal wie praezise Position und Ausschnitt stimmen.

     Deshalb jetzt der robuste Weg: KEINE Ueberlappung mehr. Jedes Teil
     bekommt seine eigene, klar begrenzte Karte (eigener Rahmen/Hintergrund)
     in einem 2-Spalten-Raster, Reihenfolge = Anziehreihenfolge (Jacke,
     Oberteil, Unterteil, Schuhe, Accessoire). Das vollstaendige Foto wird
     unbeschnitten gezeigt (object-fit:contain) - keine Koerperteil-
     Ausschnitte mehr noetig, weil keine zweite Karte mehr direkt "dahinter"
     weitergehen muss. Die Look-Fotos sind sehr hochformatig (~525x1093px,
     Seitenverhaeltnis ~0.48) - in EINER breiten, kurzen Zeile wuerden sie
     winzig mit viel leerem Schwarz drumherum wirken. Ein 2-Spalten-Raster
     gibt jeder Karte eine schmalere, hoehere Zelle, die deutlich naeher am
     tatsaechlichen Fotoformat liegt.

     Leere Slots bekommen display:none statt nur opacity:0 (grid-auto-flow:
     row dense sorgt dafuer, dass die sichtbaren Karten dann ohne Luecken
     von oben links auffuellen, unabhaengig davon, welche Kombination von
     Slots gerade gefuellt ist - z.B. bei einem Kleid ohne Bottom-Slot). */
  .look-card {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    min-height: 0;
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    overflow: hidden;
  }

  .look-card.visible { display: flex; animation: lookCardIn 0.25s ease; }

  @keyframes lookCardIn {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
  }

  .look-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 6%;
    box-sizing: border-box;
  }

  /* Feste Reihenfolge im Raster statt nur "wie im DOM/wie gerade befuellt":
     order steuert die Fuellreihenfolge von grid-auto-flow (unabhaengig von
     der HTML-Reihenfolge), damit jede Artikelart IMMER an derselben,
     koerperlogischen Stelle landet. Kopf-/Gesichts-Accessoires (Muetzen,
     Caps, Sonnenbrillen) und Guertel bekommen in renderOutfitFigure() die
     Zusatzklasse look-card--accessory-top (siehe app.js) und ruecken damit
     ganz nach oben, sogar vor Jacke/Oberteil. Schuhe bleiben IMMER
     zuunterst - unabhaengig davon, welches Accessoire gerade gewaehlt ist. */
  .look-card--jacket { order: 2; }
  .look-card--top { order: 3; }
  /* Alle anderen Accessoires (Guertel, Taschen, Schals, Wallets, ...)
     zwischen Oberteil und Unterteil statt danach - ein Guertel sitzt
     koerperlich auf Hueft-/Taillenhoehe, eine Tasche wird getragen, nicht
     "unter der Hose" - beides gehoerte vorher faelschlich zwischen
     Unterteil und Schuhe (Nutzer-Feedback: "Guertel darf nie ganz oben
     sein" / "Rucksack und Rock tauschen"). */
  .look-card--accessory { order: 4; }
  .look-card--bottom { order: 5; }
  .look-card--accessory-top { order: 1; }
  .look-card--shoes { order: 6; }

  .outfit-stack {
    width: min(360px, 100%);
    display: flex;
    flex-direction: column;
    gap: clamp(4px, 0.9vh, 10px);
    flex: 1 1 auto;
    min-height: 0;
  }

  .outfit-slot {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    padding: 0 10px;
    /* Feste (aber viewport-abhaengige statt starr fixe) Hoehe - vorher
       durften leere/kuerzere Kaesten (z.B. der optionale Jacke-Slot) auf
       ihre Inhaltsgroesse schrumpfen, wirkte uneinheitlich neben den
       befuellten Kaesten, daher weiterhin alle fuenf Kaesten exakt gleich
       hoch. Der alte fixe Wert (116px, kein vh-Anteil) schrumpfte nie mit
       der Fensterhoehe - fuenf Kaesten a 116px + Kopf-/Fussbereich waren in
       gewoehnlich grossen Desktop-Fenstern zusammen hoeher als das Fenster
       selbst, sodass der Baukasten nur noch mit Scrollen bedienbar war.
       clamp() haelt ihn jetzt kompakt genug, um komplett ohne Scrollbalken
       in eine normale Fensterhoehe zu passen. */
    flex: 0 0 clamp(64px, 9.5vh, 100px);
    height: clamp(64px, 9.5vh, 100px);
  }

  .outfit-slot__frame {
    width: clamp(42px, 7.2vh, 76px);
    height: clamp(50px, 8.6vh, 88px);
    flex: 0 0 auto;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
  }

  .outfit-slot__frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    padding: 8%;
    display: block;
  }

  .outfit-slot__body {
    flex: 1;
    min-width: 0;
    cursor: pointer;
  }

  .outfit-slot__label {
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .outfit-slot__value {
    font-size: 0.8rem;
    margin-top: 2px;
    color: var(--text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: 1.3;
  }

  .outfit-slot__price {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.78rem;
    margin-top: 2px;
    color: var(--text);
  }

  .outfit-slot--empty .outfit-slot__frame {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--rule-strong);
    font-size: 1.3rem;
    color: var(--text-faint);
  }

  .outfit-slot--empty .outfit-slot__value { color: var(--text-faint); }

  .outfit-slot--locked {
    opacity: 0.5;
  }

  .outfit-slot--locked .outfit-slot__frame,
  .outfit-slot--locked .outfit-slot__body {
    cursor: default;
  }

  .outfit-slot__remove {
    background: transparent;
    border: none;
    color: var(--text-faint);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 6px;
    flex: 0 0 auto;
  }

  .outfit-slot__remove:hover { color: var(--accent); }

  .outfit-view__footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(6px, 1vh, 10px);
    width: min(360px, 100%);
  }

  .outfit-total {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--rule-strong);
    padding-top: 8px;
    font-size: 0.92rem;
    font-weight: 700;
  }

  .outfit-view__actions {
    display: flex;
    gap: 8px;
    width: 100%;
  }

  .outfit-view__actions .view-enter-btn { flex: 0 0 auto; padding: 10px 14px; }

  .outfit-view__actions #outfitAddCart { flex: 1 1 auto; }

  .outfit-cta {
    background: var(--accent);
    color: #17110a;
    border: none;
  }

  .outfit-cta[disabled] {
    background: var(--rule-strong);
    color: var(--text-faint);
    cursor: default;
  }

  .outfit-picker {
    position: fixed;
    top: var(--rail-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 260;
    background: rgba(6, 6, 5, 0.94);
    display: none;
    flex-direction: column;
    padding: 20px;
  }

  .outfit-picker.open { display: flex; }

  .outfit-picker__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 700px;
    width: 100%;
    margin: 0 auto 16px;
  }

  .outfit-picker__title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .outfit-picker__search {
    display: block;
    max-width: 700px;
    width: 100%;
    margin: 0 auto 10px;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--rule-strong);
    color: var(--paper);
    font-family: inherit;
    font-size: 0.9rem;
    padding: 6px 2px 10px;
  }

  .outfit-picker__search::placeholder { color: rgba(242, 239, 231, 0.4); }
  .outfit-picker__search:focus { border-bottom-color: var(--accent); }

  .outfit-picker__filters {
    display: flex;
    gap: 10px;
    max-width: 700px;
    width: 100%;
    margin: 0 auto 18px;
  }

  .outfit-picker__filters select,
  .outfit-picker__filters input {
    appearance: none;
    -webkit-appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999691' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    border: 1px solid var(--rule-strong);
    color: var(--paper);
    font-family: inherit;
    font-size: 0.76rem;
    padding: 7px 26px 7px 10px;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 0;
  }

  .outfit-picker__filters input { background-image: none; padding-right: 10px; }
  .outfit-picker__filters select option { background: var(--ink); color: var(--paper); }
  .outfit-picker__filters select:focus,
  .outfit-picker__filters input:focus { border-color: var(--accent); outline: none; }
  .outfit-picker__filters input::placeholder { color: rgba(242, 239, 231, 0.4); }

  .outfit-picker__empty {
    max-width: 700px;
    margin: 0 auto;
    color: var(--text-faint);
    font-size: 0.86rem;
    text-align: center;
    padding: 40px 0;
  }

  .outfit-picker__grid {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px;
    padding-bottom: 20px;
  }

  .outfit-picker__item {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--paper);
    text-align: left;
  }

  .outfit-picker__item-frame {
    aspect-ratio: 3 / 4;
    background: var(--mount);
    overflow: hidden;
    border: 1px solid transparent;
  }

  .outfit-picker__item--active .outfit-picker__item-frame {
    border-color: var(--accent);
  }
  .outfit-picker__item--active .outfit-picker__item-title { color: var(--accent-text); }

  .outfit-picker__item-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    padding: 8%;
    display: block;
  }

  .outfit-picker__item-title {
    font-size: 0.72rem;
    margin-top: 6px;
    line-height: 1.3;
  }

  .outfit-picker__item-price {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    margin-top: 2px;
  }

  /* ---------- Verleih (Rental) ---------- */

  .plate__rental-btn {
    display: block;
    width: 100%;
    margin-top: 8px;
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--text-faint);
    font-family: inherit;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    padding: 7px 8px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .plate__rental-btn:hover,
  .plate__rental-btn:focus-visible { border-color: var(--accent); color: var(--paper); }

  .rental-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(6, 6, 5, 0.86);
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .rental-modal-backdrop.hidden { display: none; }

  .rental-modal {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--ink);
    border: 1px solid var(--rule-strong);
    border-bottom: none;
    padding: 20px;
  }

  @media (min-width: 640px) {
    .rental-modal-backdrop { align-items: center; }
    .rental-modal { border-bottom: 1px solid var(--rule-strong); }
  }

  .rental-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
  }

  .rental-modal__title {
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
  }

  .rental-modal .modal__close {
    position: static;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
  }

  .rental-modal__item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--rule-strong);
    padding: 8px;
    margin-bottom: 16px;
  }
  .rental-modal__item img {
    width: 44px;
    height: 58px;
    object-fit: contain;
    background: var(--mount);
  }
  .rental-modal__item-body { font-size: 0.78rem; line-height: 1.4; }
  .rental-modal__item-price { color: var(--accent); font-weight: 700; }
  .rental-modal__item-price--sold {
    color: var(--text-muted);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
  }

  .rental-modal__row {
    display: flex;
    gap: 12px;
  }

  .rental-modal__field {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .rental-modal__field label {
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
  }
  .rental-modal__field input,
  .rental-modal__field select,
  .rental-modal__field textarea {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--paper);
    font-family: inherit;
    font-size: 0.86rem;
    padding: 8px 10px;
    border-radius: 0;
    resize: vertical;
  }
  .rental-modal__field select option { background: var(--ink); color: var(--paper); }
  .rental-modal__field input:focus,
  .rental-modal__field select:focus,
  .rental-modal__field textarea:focus { border-color: var(--accent); outline: none; }
  /* Native Datumsfelder haben in dunklen Themes ein schwer sichtbares
     schwarzes Kalendersymbol - invertieren macht es auf dunklem Grund lesbar. */
  .rental-modal__field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); }

  .rental-modal__days {
    font-size: 0.76rem;
    color: var(--text-faint);
    margin: -6px 0 14px;
  }

  .rental-modal__error {
    font-size: 0.76rem;
    color: var(--accent);
    margin: -6px 0 14px;
  }
  .rental-modal__error.hidden { display: none; }

  .rental-modal__note {
    font-size: 0.72rem;
    color: var(--text-faint);
    line-height: 1.5;
    margin-bottom: 16px;
  }

  /* Bereits verkaufte Stuecke: Formularfelder ausblenden statt eine
     Miet-Anfrage fuer ein nicht mehr verfuegbares Stueck zuzulassen -
     openRentalModal() setzt diese Klasse. Betrifft auch den Deep-Link
     /mieten/?item=<id> (z.B. ein alter, geteilter Link zu einem
     inzwischen verkauften Stueck), der bisher komplett ungeprueft direkt
     das Formular geoeffnet hat. */
  .rental-modal--sold .rental-modal__row,
  .rental-modal--sold .rental-modal__field,
  .rental-modal--sold .rental-modal__days,
  .rental-modal--sold .rental-modal__error,
  .rental-modal--sold .rental-modal__note {
    display: none;
  }

  .rental-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .rental-modal__actions a,
  .rental-modal__actions p {
    display: block;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 12px;
    border: 1px solid var(--paper);
    color: var(--paper);
    text-decoration: none;
  }
  .rental-modal__actions a:hover { background: var(--paper); color: var(--ink); }
  .rental-modal__actions .rental-modal__config-warning {
    font-weight: 400;
    font-size: 0.74rem;
    border-style: dashed;
    color: var(--text-faint);
  }

  @media (prefers-reduced-motion: reduce) {
    .plate__frame img { transition: none; }
    .swipe-card { transition: none; }
  }

  /* ---------- Mobile ---------- */

  @media (max-width: 720px) {
    .masthead { padding-top: 10px; padding-bottom: 12px; gap: 8px; }
    /* Kompletter Wechsel auf mittige Ausrichtung statt der linksbuendigen
       Desktop-Anordnung - Sprachumschalter + Warenkorb bleiben als kleine,
       oben rechts verankerte Utility-Icons (uebliche Konvention, zaehlt
       nicht gegen die Symmetrie des eigentlichen Inhalts darunter). Text,
       Logo und Kennzahlen sind darunter alle zentriert - wirkt wie ein
       richtiger, ausbalancierter Hero-Bereich statt einer Textspalte. */
    .masthead__top {
      display: flex; flex-direction: column; align-items: center;
      text-align: center; gap: 6px; position: relative;
      padding-top: 52px;
    }
    .eyebrow { grid-column: auto; justify-self: auto; max-width: 100%; margin: 0 auto; font-size: 0.56rem; line-height: 1.3; }
    .wordmark-block { grid-column: auto; justify-self: auto; align-items: center; width: 100%; }
    /* Auf dem iPhone soll der Name klar fuehren, aber nicht mehr fast die
       gesamte Bildschirmbreite belegen. */
    .wordmark { font-size: clamp(2rem, 10.2vw, 2.6rem); line-height: 0.9; }
    .wordmark-kicker { font-size: 0.54rem; }
    .masthead__actions {
      grid-column: auto; justify-self: auto;
      position: absolute; top: 0; right: 0;
      display: flex; align-items: center; gap: 8px;
    }
    .lang-switch__btn { padding: 5px 6px; font-size: 0.6rem; }
    /* Reine Zier-Zeile (Markenaufzaehlung) - auf dem Handy nur zusaetzliche
       Zeilen vor dem eigentlichen Archiv, ohne eigenen Nutzwert (die echte
       Markensuche laeuft ueber das Suchfeld/den Marken-Filter). */
    .masthead__index { display: none; }
    .masthead__bottom { align-items: center; text-align: center; gap: 6px; }
    /* Kennzahlen (235/165/46) waren ein 2-zeiliger 3-Spalten-Block - auf dem
       Handy als eine schmale, zentrierte Zeile statt eigenem Block, spart
       deutlich Hoehe vor dem eigentlichen Archiv. */
    .masthead__meta { justify-content: center; gap: 14px; }
    .meta-figure { flex-direction: row; align-items: baseline; gap: 4px; }
    .meta-figure__value { font-size: 0.82rem; }
    .meta-figure__label { font-size: 0.56rem; }

    .rail {
      position: static;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 9px;
      padding: 12px 16px;
    }
    .rail__search { flex: 0 0 auto; max-width: none; }
    .rail__search input { font-size: 16px; padding: 10px 2px; }
    .chip-row {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 2px;
      gap: 6px;
      /* Weicher Ausblend-Rand statt hartem Anschnitt am Bildschirmrand -
         signalisiert "hier geht wischbar weiter" statt wie abgeschnitten. */
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
      mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }
    .chip-row::-webkit-scrollbar { display: none; }
    .chip { padding: 7px 10px; flex: 0 0 auto; font-size: 0.64rem; }
    .rail__right { width: 100%; justify-content: space-between; margin-left: 0; flex-wrap: wrap; gap: 10px; }
    .rail__sort { padding: 9px 10px; }
    .theme-toggle { padding: 10px 12px; font-size: 0.64rem; }
    /* Sortierung + Foto-Hintergrund-Umschalter sind auf dem Handy standardmaessig
       ausgeblendet, um die erste Ansicht schlank zu halten - sie erscheinen
       zusammen mit den restlichen Filtern, sobald "Weitere Filter" geoeffnet
       ist. Nichts geht verloren, nur der Ersteindruck wird ruhiger. */
    .rail__sort, #mountToggle { display: none; }
    #moreFiltersToggle[aria-expanded="true"] ~ .rail__sort,
    #moreFiltersToggle[aria-expanded="true"] ~ #mountToggle { display: inline-flex; }

    .grid-wrap { padding: 12px 16px 70px; }
    .grid { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
    .plate__frame img { padding: 6%; }
    .plate__brand { font-size: 0.64rem; }
    .plate__title { font-size: 0.8rem; }
    .plate__price { font-size: 0.86rem; }
    .plate__cart-btn { width: 38px; height: 38px; font-size: 1.15rem; }

    .modal-backdrop { padding: 0; align-items: stretch; }
    .modal { max-height: 100vh; height: 100%; border: none; }
    .modal__media { min-height: 46vh; }
    .modal__nav { width: 44px; height: 44px; font-size: 1.6rem; }
    .modal__close { width: 40px; height: 40px; top: 12px; right: 12px; }
    .modal__share { width: 40px; height: 40px; top: 12px; left: 12px; font-size: 1.1rem; }
    .modal__share-toast { top: 56px; left: 12px; }
    .modal__panel { padding: 20px 18px 28px; }

    .cart-drawer { width: 100%; }

    .footer { padding: 20px 16px 28px; font-size: 0.7rem; }

    .outfit-view {
      padding: 10px 10px calc(8px + env(safe-area-inset-bottom));
      gap: 6px;
      align-items: stretch;
    }
    .outfit-view__close { top: 8px; right: 10px; width: 28px; height: 28px; font-size: 0.8rem; }
    .outfit-view__head { min-height: 76px; }
    .outfit-view__eyebrow { font-size: 0.54rem; }
    .outfit-view__title { font-size: clamp(1.05rem, 5.2vw, 1.5rem); }
    .outfit-view__status { font-size: 0.64rem; margin-top: 2px; }

    /* Uebersichtlicher iPhone-Baukasten: die fuenf Auswahlfelder liegen in
       einer horizontal wischbaren Reihe (gleiches Muster wie die Kategorie-
       Chips), gross genug um Bild UND Preis klar zu erkennen. Die Vorschau
       nutzt darunter die volle Breite und die Aktionen bleiben im normalen
       Fluss statt Artikel zu verdecken. */
    /* Liste und Look-Board nebeneinander wie am Desktop (nicht mehr
       uebereinander gestapelt - wirkte gedrungen und liess die Buehne
       nicht wie einen gleichwertigen Teil des Layouts wirken). Grid statt
       Flexbox-Wrap: ein flex-wrap-Layout mit zwei Zeilen (Spalten-Zeile +
       volle-Breite-Footer-Zeile) berechnete die Hoehe der ersten Zeile beim
       Testen falsch (Browser-Eigenheit, gleiche Ursache wie schon einmal
       beim Desktop-Look-Board: bei einem auto-groessen Flex-Container mit
       mehreren Zeilen wird fuer die Zeilenhoehe teils die Content-Groesse
       statt der tatsaechlich verfuegbaren Hoehe herangezogen) - live
       gemessen: Spalten wurden 792px hoch bei nur 679px verfuegbarem Platz,
       sobald alle 5 Zeilen befuellt waren. Grid-Tracks (minmax(0,1fr) fuer
       die Spaltenzeile, auto fuer die Footer-Zeile) berechnen das direkt
       und zuverlaessig - exakt das gleiche Prinzip wie grid-auto-rows:
       minmax(0,1fr) im Look-Board selbst (siehe .outfit-figure__stage). */
    .outfit-layout {
      display: grid;
      grid-template-columns: 38% 1fr;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 10px;
      max-width: 100%;
      align-items: stretch;
      padding-bottom: 0;
      position: static;
      overflow: visible;
    }
    .outfit-main { display: contents; }
    .outfit-stack {
      grid-column: 1;
      grid-row: 1;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      /* Oben ausgerichtet (Standard) statt zentriert: die erste Zeile
         links soll exakt auf gleicher Hoehe wie die erste Karte im
         Look-Board rechts beginnen ("auf einer Ebene", Nutzer-Feedback) -
         mit justify-content:center schwebte die kuerzere Liste mittig in
         ihrer Spalte, waehrend die Buehne rechts oben buendig anfing. */
      gap: clamp(4px, 1vh, 10px);
    }
    .outfit-figure {
      grid-column: 2;
      grid-row: 1;
      min-width: 0;
      min-height: 0;
      gap: 4px;
    }
    .outfit-figure__label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    /* Zeilen-Layout wie am Desktop (Bild links, Name/Preis rechts) statt
       der vorherigen breiten, horizontal wischbaren Kartenreihe - passt
       jetzt in die schmale linke Spalte. Groesse ueber vh-Clamp wie beim
       Desktop-Pendant, damit die 5 Zeilen unabhaengig von der Handy-
       Bildschirmhoehe immer ohne Scrollen passen. */
    .outfit-slot {
      flex-direction: row;
      align-items: center;
      gap: 8px;
      padding: 0 8px;
      position: relative;
      flex: 0 0 clamp(54px, 11vh, 100px);
      height: clamp(54px, 11vh, 100px);
    }
    .outfit-slot__frame {
      width: clamp(36px, 7.5vh, 72px);
      height: clamp(42px, 8.8vh, 86px);
      flex: 0 0 auto;
    }
    .outfit-slot__body { text-align: left; }
    /* Vorher komplett ausgeblendet (nur Bild + Preis) - dadurch war ohne
       Antippen nicht erkennbar, WELCHES Teil man da eigentlich ausgewaehlt
       hat, was sich kalt/leblos anfuehlte statt wie ein Styling-Tool mit den
       eigenen, konkret ausgesuchten Stuecken. Name jetzt sichtbar, zweizeilig
       mit Ellipsis (bei der schmalen Spaltenbreite reicht eine Zeile oft
       nicht); die Kategorie-Beschriftung (z.B. "OBERTEIL/KLEID") bleibt
       ausgeblendet, weil sie bei dieser Kartengroesse redundant zur
       Position in der Reihe ist. */
    .outfit-slot__label {
      display: none;
    }
    .outfit-slot__value {
      display: -webkit-box;
      font-size: 0.62rem;
      line-height: 1.2;
      margin-top: 0;
      text-align: left;
      overflow: hidden;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .outfit-slot__price {
      font-size: 0.64rem;
      margin-top: 2px;
      text-align: left;
      white-space: nowrap;
    }
    .outfit-slot__remove {
      position: absolute;
      top: 2px;
      right: 2px;
      width: 18px;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(10, 10, 9, 0.72);
      color: var(--paper);
      font-size: 0.62rem;
      padding: 0;
    }
    .outfit-view__footer {
      grid-column: 1 / -1;
      grid-row: 2;
      position: static;
      left: auto;
      right: auto;
      bottom: auto;
      width: 100%;
    }

    /* ...und bei hohem Swipe-Karten-Inhalt auch den zentrierten "Zum Archiv"-
       Button dort - Swipe-View bekommt daher unten reservierten Platz. */
    .swipe-view { padding-bottom: 64px; }
  }

  /* ---------- Minimalistische Archiv-Struktur ---------- */

  :root { --rail-h: 64px; }

  .mode-rail {
    height: var(--rail-h);
    justify-content: space-between;
    gap: 0;
    padding: 0 clamp(16px, 3vw, 34px);
    border-bottom-color: rgba(242, 239, 231, 0.2);
    overflow: visible;
  }

  .mode-rail.rail-hidden { transform: none; }

  .site-header__menu,
  .site-header__brand {
    border: 0;
    background: transparent;
    color: var(--paper);
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
  }

  .site-header__menu {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .site-header__brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 12px;
    font-family: "Helvetica Neue Condensed", "Arial Narrow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.035em;
  }

  .site-header__actions {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .site-header .mode-rail__btn {
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    border: 0;
  }

  .site-header .mode-rail__btn[aria-current="true"] {
    background: transparent;
    border: 0;
    color: var(--paper);
  }

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

  .masthead {
    align-items: center;
    gap: clamp(20px, 3vw, 32px);
    /* Deutlich reduziert (war clamp(62px,9vw,128px)/clamp(52px,8vw,108px)) -
       auf normal grossen Desktop-Fenstern stand vor dem ersten Artikel eine
       reine schwarze Flaeche von ueber 200px allein durch dieses Padding,
       zusaetzlich zum eigentlichen Hero-Inhalt. Wordmark/Kennzahlen bleiben
       unveraendert gross und prominent, nur der leere Rand drumherum ist
       kleiner - Artikel ruecken dadurch spuerbar naeher an den sichtbaren
       Bereich beim Laden der Seite heran. */
    padding: clamp(36px, 5vw, 72px) 20px clamp(32px, 5vw, 64px);
  }

  .masthead__top {
    width: min(100%, 980px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 2.4vw, 28px);
    text-align: center;
  }

  .wordmark-block {
    order: 1;
    width: 100%;
  }

  .wordmark-kicker {
    font-size: clamp(0.58rem, 0.8vw, 0.72rem);
    letter-spacing: 0.18em;
  }

  .wordmark {
    justify-content: center;
    font-size: clamp(4rem, 10vw, 8rem);
    line-height: 0.9;
  }

  .eyebrow {
    order: 2;
    max-width: 66ch;
    margin: 0;
    text-align: center;
    font-size: clamp(0.62rem, 0.9vw, 0.76rem);
    line-height: 1.65;
    letter-spacing: 0.13em;
  }

  .masthead__actions { display: none; }

  .masthead__bottom {
    width: min(100%, 760px);
    justify-content: center;
  }

  .masthead__meta {
    width: 100%;
    justify-content: center;
    gap: clamp(42px, 9vw, 110px);
  }

  .meta-figure {
    align-items: center;
    text-align: center;
  }

  .meta-figure__value {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
  }

  .meta-figure__label {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
  }

  .masthead__index { display: none; }

  @media (max-width: 720px) {
    :root { --rail-h: 54px; }

    .mode-rail { padding: 0 12px; }
    .site-header__menu { width: 34px; height: 34px; }
    .site-header__brand { font-size: 0.8rem; }
    .site-header .mode-rail__btn { width: 32px; height: 34px; }
    .site-header__actions { gap: 0; }
    .cart-bag { width: 48px; height: 48px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }
    .cart-bag svg { width: 22px; }

    .masthead {
      gap: 30px;
      padding: 56px 18px 48px;
    }

    .masthead__top {
      padding-top: 0;
      gap: 18px;
    }

    .wordmark { font-size: clamp(2.75rem, 13.2vw, 3.55rem); }
    .wordmark-kicker { font-size: 0.54rem; }
    .eyebrow { max-width: 39ch; font-size: 0.56rem; line-height: 1.55; }

    .masthead__meta {
      align-items: flex-start;
      gap: 0;
    }

    .meta-figure {
      flex: 1 1 0;
      flex-direction: column;
      gap: 6px;
    }

    .meta-figure__value { font-size: 1.15rem; }
    .meta-figure__label {
      max-width: 12ch;
      font-size: 0.5rem;
      line-height: 1.35;
    }
  }

  /* ---------- Reduzierter Katalog, Menü und Footer ---------- */

  .menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 420;
    display: none;
    background: rgba(0, 0, 0, 0.74);
  }

  .menu-backdrop.open { display: block; }

  .menu-drawer {
    width: min(430px, 100%);
    height: 100%;
    overflow-y: auto;
    background: var(--ink);
    color: var(--paper);
    border-right: 1px solid var(--rule-strong);
    padding: 22px clamp(22px, 5vw, 42px) 38px;
  }

  .menu-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--rule);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .menu-drawer__close {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: var(--paper);
    cursor: pointer;
  }

  .menu-drawer__nav,
  .menu-drawer__section {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .menu-drawer__nav {
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
  }

  .menu-drawer__section { padding: 22px 0; }

  .menu-drawer__nav button,
  .menu-drawer__section button,
  .menu-drawer__brands button,
  .menu-drawer__nav a {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--paper);
    font-family: inherit;
    font-size: 0.78rem;
    letter-spacing: 0.075em;
    text-align: left;
    text-transform: uppercase;
    text-decoration: none;
    padding: 9px 0;
    cursor: pointer;
  }

  .menu-drawer__nav button:hover,
  .menu-drawer__section button:hover,
  .menu-drawer__brands button:hover,
  .menu-drawer__nav a:hover { color: var(--accent-text); }

  .menu-drawer__brands {
    max-height: 230px;
    overflow-y: auto;
    margin: 4px 0 10px 12px;
    padding-left: 12px;
    border-left: 1px solid var(--rule-strong);
  }

  .menu-drawer__brands button {
    color: var(--text-muted);
    font-size: 0.66rem;
    padding: 7px 0;
  }

  .menu-drawer__languages {
    display: flex;
    gap: 18px;
    padding-top: 10px;
  }

  .menu-drawer__languages button {
    border: 0;
    background: transparent;
    color: var(--text-faint);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 0;
    cursor: pointer;
  }

  .menu-drawer__languages button[aria-current="true"] {
    color: var(--paper);
    border-bottom: 1px solid var(--paper);
  }

  .rail {
    position: static;
    width: min(100%, 1000px);
    margin: 0 auto;
    padding: clamp(16px, 3vw, 32px) 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(24px, 4vw, 40px);
    border: 0;
  }

  .rail__search {
    width: 100%;
    max-width: none;
    flex: none;
  }

  .rail__search input {
    font-size: clamp(1rem, 1.7vw, 1.3rem);
    padding: 14px 0;
    border-bottom-color: rgba(242, 239, 231, 0.42);
  }

  .catalog-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    color: var(--paper);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .catalog-heading .rail__count {
    color: var(--text-faint);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.08em;
  }

  .catalog-controls { display: none !important; }

  .grid-wrap {
    width: min(100%, 1400px);
    margin: 0 auto;
    padding: 10px clamp(18px, 3vw, 36px) clamp(86px, 10vw, 140px);
  }

  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(52px, 6vw, 88px) clamp(18px, 2.5vw, 34px);
  }

  @media (min-width: 1180px) {
    .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

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

  .plate__frame img { padding: 3%; }

  .plate__sold-bar,
  .plate__estimate-badge,
  .plate__cart-btn,
  .plate__size { display: none !important; }

  .plate__body {
    gap: 3px;
    padding-top: 10px;
  }

  .plate__brand { font-size: 0.66rem; }
  .plate__title { font-size: 0.78rem; }
  .plate__row { margin-top: 4px; }
  .plate__price { font-size: 0.82rem; }

  .plate__price--sold {
    color: var(--text-muted);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .load-more-wrap {
    display: flex;
    justify-content: center;
    padding-top: clamp(64px, 8vw, 110px);
  }

  .load-more {
    min-width: 190px;
    border: 1px solid var(--rule-strong);
    background: transparent;
    color: var(--paper);
    font-family: inherit;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 14px 24px;
    cursor: pointer;
  }

  .load-more:hover { border-color: var(--paper); }
  .load-more.hidden { display: none; }

  .footer {
    width: min(100%, 1400px);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 42px) clamp(52px, 7vw, 86px);
    display: block;
    border: 0;
    color: var(--paper);
    font-size: 0.66rem;
  }

  .footer__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: clamp(38px, 6vw, 72px) 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }

  .footer__nav button,
  .footer__nav a,
  .footer__cart {
    border: 0;
    background: transparent;
    color: var(--paper);
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0;
    cursor: pointer;
  }

  .footer__stamp {
    display: block;
    margin-top: 24px;
    color: var(--text-faint);
  }

  .footer__legal {
    justify-content: flex-start;
    margin-top: 12px;
  }

  .footer__cart {
    display: flex;
    gap: 6px;
    margin-top: clamp(68px, 9vw, 120px);
  }

  @media (max-width: 720px) {
    .masthead {
      gap: 25px;
      padding: 40px 18px 36px;
    }

    .wordmark { font-size: clamp(2.65rem, 12.4vw, 3.35rem); }

    .rail {
      gap: 30px;
      padding: 16px 16px 12px;
    }

    .rail__search input { padding: 12px 0; }

    .catalog-heading { font-size: 0.64rem; }

    .grid-wrap {
      padding: 8px 12px 84px;
    }

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

    .plate__frame img { padding: 2%; }
    .plate__body { padding-top: 8px; }
    .plate__brand { font-size: 0.58rem; }
    .plate__title { font-size: 0.7rem; }
    .plate__price { font-size: 0.76rem; }
    .plate__price--sold { font-size: 0.6rem; }

    .load-more-wrap { padding-top: 62px; }

    .footer {
      padding: 0 16px calc(58px + env(safe-area-inset-bottom));
    }

    .footer__nav { padding: 34px 0; }
    .footer__cart { margin-top: 72px; }
  }

  /* Nachtraeglicher, gezielter Fix fuer sehr schmale Handys (320-360px):
     mehrere aeltere @media(max-width:...)-Regeln weiter oben setzen jeweils
     ihre eigene .wordmark-Schriftgroesse fuer unterschiedliche Breiten -
     bei einer Viewport-Breite, die GLEICHZEITIG mehrere dieser Bedingungen
     erfuellt (320px erfuellt z.B. sowohl "max-width:480px" als auch
     "max-width:720px"), gewinnt in CSS bei gleicher Spezifitaet die zuletzt
     im Dokument stehende Regel - das war hier die fuer 720px gedachte,
     groessere Schriftgroesse, nicht die eigentlich fuer 320px vorgesehene.
     Ergebnis: der Schriftzug "DISORDER119" lief bei 320-360px ueber den
     Viewport hinaus (verifiziert: 327px Inhaltsbreite bei 320px Breite,
     42.4px statt der vorgesehenen ~34px Schriftgroesse). Diese Regel steht
     bewusst als letzte im gesamten Stylesheet, damit sie in jedem Fall
     gewinnt, unabhaengig davon, wie viele aeltere Breakpoints ebenfalls
     zutreffen. */
  @media (max-width: 380px) {
    .wordmark { font-size: clamp(1.8rem, 10.5vw, 2.1rem); }
  }

/* QUALITY95_CART_MESSAGE_STYLE — scoped to the classic cart only. */
.cart-order-message{display:block;margin:12px 0 14px;font-size:.68rem;line-height:1.35;color:var(--text-muted)}
.cart-order-message>span{display:block;margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase}
.cart-order-message small{font-size:inherit;text-transform:none;letter-spacing:0;color:var(--text-faint)}
.cart-order-message textarea{display:block;width:100%;min-height:72px;max-height:150px;resize:vertical;border:1px solid var(--rule-strong);border-radius:0;background:transparent;color:var(--text);font:inherit;font-size:.78rem;line-height:1.45;padding:10px}
.cart-order-message textarea:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px;border-color:var(--accent-text)}

  /* ADVERSARIAL_MODAL_LAYERING
     The one-time global mode hint is z-index 281 while the Baukasten picker
     used 260. On a first visit the hint's close button could therefore sit on
     top of the open picker and intercept its close control. Keep the fixed
     mode rail (300) above the picker, but place an *open* picker above the
     hint. No layout, styling or protected-mode behaviour changes. */
  .outfit-picker.open { z-index: 290; }

  /* ADVERSARIAL_QUICKVIEW_LAYERING
     The shared product quickview used z-index 50 while the global mode rail is
     300. In Chaos this allowed a rail tab to physically cover the modal close
     button. A modal must own pointer/focus interaction while open, so only the
     open backdrop is raised above the rail. */
  .modal-backdrop.open { z-index: 320; }

  /* PERF_A11Y_95_ARCHIVE_STYLE
     Quantitative axe/Lighthouse findings in the normal archive only.
     Selectors are scoped to #appShell so Match/Chaos/Baukasten retain their
     protected visual design. The hierarchy stays muted, but no essential
     small text is rendered at failing contrast. Brand filters gain the WCAG
     minimum pointer target without increasing their visible typography. */
  #appShell .eyebrow,
  #appShell .wordmark-kicker,
  #appShell .meta-figure__label,
  #appShell .catalog-heading .rail__count,
  #appShell .filter-field label,
  #appShell .footer__stamp,
  #appShell .footer__legal a,
  #appShell .plate__title {
    color: rgba(242, 239, 231, 0.72);
  }

  /* Opacity animations temporarily pushed otherwise compliant text below the
     contrast threshold during the first audit frame. Keep the original
     transform/letter-spacing motion, but text itself is readable immediately. */
  #appShell .reveal,
  #appShell .wordmark__line {
    opacity: 1 !important;
  }

  #appShell .plate__brand {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 24px;
    min-height: 24px;
    padding: 4px 0;
  }

  #appShell .plate__rental-btn {
    color: var(--accent-text);
  }

  /* FOCUS3_MEASURED_LCP_FOLLOWUP
     Keep readable card text fully opaque during the entrance transform and
     keep the brand filter safely above the WCAG pointer-target floor. */
  #appShell .plate.plate--enter { opacity: 1 !important; }
  #appShell .plate__brand { min-height: 32px; min-width: 32px; padding: 4px 2px; }

  /* Measured Rental V2 contrast findings. Text-only contrast hardening;
     pricing, rental lifecycle and protected creative modes remain untouched. */
  #d119RentalV2Title,
  .d119-rental-set-copy strong,
  .d119-rental-set-copy span,
  .d119-rental-set-add__label,
  .d119-rental-process-details > summary,
  .d119-rental-v2__section h3,
  .d119-rental-item__meta strong,
  .d119-rental-item__meta span,
  .d119-rental-item__remove,
  .d119-rental-add-inline__copy > strong,
  .d119-rental-add-inline__copy > span,
  .d119-rental-note,
  label[for="d119RentalStart"],
  label[for="d119RentalEnd"],
  #d119RentalStart,
  #d119RentalEnd {
    color: #f2efe7 !important;
  }
  #d119RentalStart,
  #d119RentalEnd {
    color-scheme: dark;
    background-color: #121212 !important;
    border-color: rgba(242,239,231,.45) !important;
  }

/* IMAGE_COPY_GUARD_V1 — product photos only; controls and icons stay untouched. */
img[src^="assets/img/"],
img[src^="/assets/img/"],
img[src*="/assets/img/"],
img[data-d119-image-protected] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* PAYPAL_VORSCHAU: PayPal ist sichtbar, bis der echte Checkout aktiv ist. */
.paypal-soon{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:46px;padding:10px 16px;border:1px solid var(--rule-strong,rgba(242,239,231,.28));background:#0b0b0b;color:var(--paper,#f2efe7);cursor:default;user-select:none;box-sizing:border-box}
.paypal-soon__mark{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;font-weight:800;font-size:1.15rem;letter-spacing:-.01em;line-height:1;text-transform:none}
.paypal-soon__mark i{font-style:inherit}
.paypal-soon__mark i:first-child{color:#f2efe7}
.paypal-soon__mark i:last-child{color:#79c3ff}
.paypal-soon__tag{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1;padding:4px 7px;color:var(--text-muted,rgba(242,239,231,.58));border:1px solid var(--rule-strong,rgba(242,239,231,.28))}
.cart-foot .paypal-soon,.cart-order-message+.paypal-soon{margin-bottom:10px}

/* Widerrufsfunktion (§ 356a BGB): "Vertrag widerrufen" steht auf jeder Seite
   und ist hervorgehoben - eigener Rahmen, volle Kontrastfarbe, 44 px hoch. */
#appShell .footer a.footer__widerruf,
.konto-fuss a.fuss-widerruf,
.kasse-fuss a.fuss-widerruf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-height: 44px;
  margin-top: 14px;
  padding: 10px 16px;
  border: 1px solid var(--text);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.konto-fuss a.fuss-widerruf,
.kasse-fuss a.fuss-widerruf { margin-top: 0; }
/* Die kleinen Rechtslinks stehen mittig neben dem hoeheren Knopf. */
.konto-fuss,
.kasse-fuss { align-items: center; }
#appShell .footer a.footer__widerruf:hover,
.konto-fuss a.fuss-widerruf:hover,
.kasse-fuss a.fuss-widerruf:hover { background: var(--text); color: var(--ink); }
#appShell .footer a.footer__widerruf:focus-visible,
.konto-fuss a.fuss-widerruf:focus-visible,
.kasse-fuss a.fuss-widerruf:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 2px; }

/* Optional statistics: equivalent actions, always accessible settings. */
.d119-privacy-choice{position:fixed;left:16px;right:16px;bottom:64px;z-index:10020;max-width:560px;margin:auto;background:#141414;color:#f5f5f5;border:1px solid #777;padding:20px;box-shadow:0 8px 40px #0009;font:14px/1.5 system-ui,sans-serif;max-height:70vh;overflow:auto}
.d119-privacy-choice h2{font:600 18px/1.3 system-ui,sans-serif;margin:0 0 12px}.d119-privacy-choice p{margin:0 0 12px}.d119-privacy-choice a{color:#fff;text-decoration:underline}
.d119-privacy-actions{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}.d119-privacy-actions button{flex:1;background:#f1f1f1;color:#111;border:1px solid #f1f1f1;padding:12px;font:600 14px system-ui,sans-serif;cursor:pointer;min-width:170px;min-height:44px}
.d119-privacy-settings{display:block;margin:0 auto;padding:14px 16px 24px;background:transparent;color:var(--text-muted);border:0;font:12px/1.4 system-ui,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px}.d119-privacy-settings:hover{color:var(--text)}.d119-privacy-choice button:focus-visible,.d119-privacy-settings:focus-visible{outline:3px solid #a8d3ff;outline-offset:3px}

/* Warenkorb: "Noch X € bis zum kostenlosen Versand", voraussichtliches
   Lieferdatum und die Zeile unter "Zur Kasse" (assets/app.js). */
.cart-frei { display: grid; gap: 6px; font-size: 0.78rem; line-height: 1.4; color: var(--text); }
.cart-frei__balken { display: block; height: 3px; background: var(--rule-strong); overflow: hidden; }
.cart-frei__balken i { display: block; height: 100%; background: var(--text); }
.cart-lieferung { margin: 0; font-size: 0.74rem; line-height: 1.45; color: var(--text-muted); }
.cart-drawer__kasse { flex-wrap: wrap; row-gap: 10px; }
.cart-kasse__vertrauen {
  flex: 1 0 100%; display: flex; align-items: center; gap: 10px;
  margin: 0; font-size: 0.68rem; line-height: 1.4; color: var(--text-muted);
}
.cart-kasse__vertrauen > span:last-child { flex: 1 1 auto; min-width: 0; }
/* Kasse: "Sicher bezahlen" unter dem PayPal-Knopf (assets/kasse.js) */
.d119-zahlart {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px;
  margin: 0; font-size: 0.72rem; color: var(--text-muted);
}
/* Zahlungslogos: Original von PayPal und Apple (assets/zahlung), gleich gross.
   Das Apple-Pay-Zeichen bringt seinen Rahmen mit; PayPal bekommt denselben. */
.d119-zahlarten { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.d119-zahlarten__apple { display: block; width: auto; height: 28px; }
.d119-zahlarten__paypal {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 43.7px; height: 28px; padding: 0 5px;
  background: #ffffff; border: 1px solid rgb(0, 0, 0); border-radius: 3.9px;
}
.d119-zahlarten__paypal img { display: block; width: 100%; height: auto; }