/**
 * TVW Designer 4 – Modul-Styles
 * Geschlossene Einheit; border-radius 6px (Design-Regel).
 */

#tvw-designer-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

#tvw-designer-modal.is-open {
    display: flex;
}

.tvw-designer-4__box {
    background: #fff;
    border-radius: 6px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    position: relative;
}

.tvw-designer-4__close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    z-index: 1;
}

/* Platzhalter bis Inhalt steht */
.tvw-designer-4__placeholder {
    padding: 3rem 2rem;
    text-align: center;
    color: #666;
}

/* Feste Designer-Seite – volle Breite; links Steuerung, rechts Bühne */
.tvw-designer-4-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 1rem;
}
.tvw-designer-4-page__inner {
    background: #fff;
    border-radius: 6px;
    padding: 1.5rem 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.tvw-designer-4-page__header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
    position: relative;
}
.tvw-designer-4-page__back-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.tvw-designer-4-page__back {
    display: inline-block;
    margin-bottom: 0;
    padding: 0.35em 0.75em;
    background: #f0f0f0;
    color: #333;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9375rem;
}
.tvw-designer-4-page__back:hover {
    background: #e0e0e0;
    color: #111;
}
.tvw-designer-4-page__color-switcher {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.tvw-designer-4-page__color-switcher-label {
    font-size: 0.875rem;
    color: #6b7280;
}
.tvw-designer-4-page__color-switcher-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.tvw-designer-4-page__color-swatch {
    -webkit-appearance: none;
    appearance: none;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #fff;
    color: #111827;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.tvw-designer-4-page__color-swatch:hover {
    border-color: #202A34;
    background: #f8fafc;
}
.tvw-designer-4-page__color-swatch.is-current {
    border-color: #202A34;
    box-shadow: 0 0 0 1px rgba(32, 42, 52, 0.22);
}
.tvw-designer-4-page__color-swatch:focus,
.tvw-designer-4-page__color-swatch:focus-visible {
    outline: none;
    border-color: #202A34;
    background: #f8fafc;
    box-shadow: 0 0 0 2px rgba(32, 42, 52, 0.2);
}
.tvw-designer-4-page__color-swatch img {
    display: block;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 4px;
}
.tvw-designer-4-page__color-swatch-placeholder {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
}
.tvw-designer-4-page__color-swatch-name {
    font-size: 0.7rem;
    margin-top: 0.15rem;
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tvw-designer-4-page__add-color-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}
.tvw-designer-4-page__add-color-modal[hidden] {
    display: none;
}
.tvw-designer-4-page__add-color-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.tvw-designer-4-page__add-color-modal-content {
    position: relative;
    background: #fff;
    border-radius: 6px;
    padding: 1.5rem;
    max-width: min(95vw, 520px);
    width: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.tvw-designer-4-page__add-color-modal-content h3 {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
}
.tvw-designer-4-page__add-color-modal-hint {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 1rem;
}
/* Bis zu 46 Farben (NS/WS/PS): max. 3 Reihen, Breite durch horizontales Scrollen */
.tvw-designer-4-page__add-color-modal-grid-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    margin-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
    max-height: 260px;
}
.tvw-designer-4-page__add-color-modal-grid {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: minmax(72px, 80px);
    gap: 0.75rem;
    width: max-content;
    min-width: 100%;
}
.tvw-designer-4-page__color-swatch--modal {
    padding: 0.5rem;
    min-width: 0;
}
.tvw-designer-4-page__color-swatch--modal img,
.tvw-designer-4-page__color-swatch--modal .tvw-designer-4-page__color-swatch-placeholder {
    width: 56px;
    height: 56px;
}
.tvw-designer-4-page__color-swatch--modal .tvw-designer-4-page__color-swatch-name {
    font-size: 0.65rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tvw-designer-4-page__add-color-modal-close {
    width: 100%;
}
.tvw-designer-4-page__title {
    margin: 0 0 0.25em;
    font-size: 1.5rem;
}
.tvw-designer-4-page__product-hint {
    margin: 0;
    font-size: 0.875rem;
    color: #666;
}
.tvw-designer-4-page__content.tvw-designer-4__placeholder {
    padding: 2rem 0;
    text-align: left;
}

/* Workspace: links Sidebar (Positionen + Upload), rechts Bühne – alles auf einen Blick */
.tvw-designer-4-page__workspace {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.5rem;
}
@media (max-width: 767px) {
    .tvw-designer-4-page__workspace {
        grid-template-columns: 1fr;
    }
}
.tvw-designer-4-page__sidebar {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}
@media (min-width: 768px) {
    .tvw-designer-4-page__sidebar {
        width: min(100%, 360px);
        min-width: 220px;
    }
}
.tvw-designer-4-page__stage-area {
    min-width: 0;
}
.tvw-designer-4-page__stage-area .tvw-designer-4-page__section-title {
    margin-top: 0;
}
.tvw-designer-4-page__service-note {
    margin: 0 0 0.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid #d7dee7;
    border-radius: 6px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.8125rem;
    line-height: 1.4;
}
.tvw-designer-4-page__flow-hint {
    margin: 0 0 0.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #c8d4e4;
    border-radius: 6px;
    background: #f1f5f9;
    color: #1e293b;
}
.tvw-designer-4-page__flow-hint[hidden] {
    display: none;
}
.tvw-designer-4-page__flow-hint-kicker {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0f172a;
}
.tvw-designer-4-page__flow-hint-text {
    margin: 0 0 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.45;
}
.tvw-designer-4-page__flow-hint-dismiss {
    margin: 0;
    padding: 0.35rem 0.6rem;
    border: 1px solid #64748b;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    font-size: 0.75rem;
    cursor: pointer;
}
.tvw-designer-4-page__flow-hint-dismiss:hover {
    background: #f8fafc;
}
.tvw-designer-4-page__flow-hint-dismiss:focus-visible {
    outline: 2px solid #202a34;
    outline-offset: 2px;
}
.tvw-designer-4-page__help-flow-restore-wrap {
    margin: 1rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
}
.tvw-designer-4-page__help-flow-restore {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    color: #202a34;
    font-size: 0.875rem;
    text-decoration: underline;
    cursor: pointer;
}
.tvw-designer-4-page__help-flow-restore:hover {
    color: #0f172a;
}
.tvw-designer-4-page__help-flow-restore:focus-visible {
    outline: 2px solid #202a34;
    outline-offset: 2px;
    border-radius: 6px;
}
.tvw-designer-4-page__help-btn {
    display: block;
    width: 100%;
    margin: 0 0 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid #202A34;
    border-radius: 6px;
    background: #202A34;
    color: #f3f4f6;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.tvw-designer-4-page__help-btn:hover {
    background: #2a3544;
    border-color: #2a3544;
}
.tvw-designer-4-page__help-btn:focus {
    outline: 2px solid #202A34;
    outline-offset: 2px;
}
.tvw-designer-4-page__help-modal {
    position: fixed;
    inset: 0;
    /* Über Shop-Header/Menü (Theme/MU nutzt teils 99999 / 100000) */
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}
.tvw-designer-4-page__help-modal[hidden] {
    display: none;
}
.tvw-designer-4-page__help-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.tvw-designer-4-page__help-modal-content {
    position: relative;
    width: min(920px, 96vw);
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
    padding: 1rem 1rem 0.9rem;
}
.tvw-designer-4-page__help-modal-content h3 {
    margin: 0 1.8rem 0.65rem 0;
    color: #202A34;
    font-size: 1rem;
}
.tvw-designer-4-page__help-modal-close {
    position: absolute;
    top: 0.35rem;
    right: 0.45rem;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: #e5e7eb;
    color: #111827;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}
.tvw-designer-4-page__help-modal-close:hover {
    background: #d1d5db;
}
.tvw-designer-4-page__help-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #f8fafc;
}
.tvw-designer-4-page__help-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 0.75rem;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #475569;
    font-size: 0.9rem;
    text-align: center;
}
.tvw-designer-4-page__help-hint {
    margin: 0.65rem 0 0;
    color: #334155;
    font-size: 0.84rem;
}

/* Gewünschte Veredelung + Info-Modal */
.tvw-designer-4-page__sidebar > .tvw-designer-4-page__veredelung-choose {
    margin-top: 0;
    margin-bottom: 0.25rem;
}
.tvw-designer-4-page__veredelung-choose {
    margin-top: 10px;
}
.tvw-designer-4-page__veredelung-lead {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #334155;
}
.tvw-designer-4-page__veredelung-fieldset {
    margin: 0;
    border: 1px solid #dbe7f3;
    border-radius: 6px;
    padding: 0.85rem 1rem 1rem;
    background: #f8fafc;
    box-sizing: border-box;
}
.tvw-designer-4-page__veredelung-fieldset > h3.tvw-designer-4-page__veredelung-heading {
    margin: 0 0 10px;
    padding: 0;
}
.tvw-designer-4-page__veredelung-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    align-items: stretch;
}
@media (min-width: 480px) {
    .tvw-designer-4-page__veredelung-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
.tvw-designer-4-page__veredelung-option {
    display: flex;
    margin: 0;
    min-width: 0;
    cursor: pointer;
}
.tvw-designer-4-page__veredelung-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.tvw-designer-4-page__veredelung-option-ui {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.65rem 0.4rem;
    min-height: 2.85rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.tvw-designer-4-page__veredelung-option:hover .tvw-designer-4-page__veredelung-option-ui {
    border-color: #94a3b8;
}
.tvw-designer-4-page__veredelung-input:focus + .tvw-designer-4-page__veredelung-option-ui {
    outline: none;
}
.tvw-designer-4-page__veredelung-input:focus-visible + .tvw-designer-4-page__veredelung-option-ui {
    outline: 2px solid #15803d;
    outline-offset: 2px;
}
/* Aktive Veredelung: grün = klar erkennbar gewählt (Druck/Stickerei/Noch unklar) */
.tvw-designer-4-page__veredelung-input:checked + .tvw-designer-4-page__veredelung-option-ui {
    border: 1px solid #15803d;
    background: #dcfce7;
    color: #14532d;
}
.tvw-designer-4-page__veredelung-option:hover .tvw-designer-4-page__veredelung-input:checked + .tvw-designer-4-page__veredelung-option-ui {
    border-color: #166534;
    background: #bbf7d0;
}
.tvw-designer-4-page__veredelung-info-wrap {
    margin: 0.85rem 0 0;
    width: 100%;
    text-align: center;
}
.tvw-designer-4-page__veredelung-info-btn {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.45rem 0.85rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #202a34;
    background: #fff;
    border: 1px solid #202a34;
    border-radius: 6px;
    cursor: pointer;
}
.tvw-designer-4-page__veredelung-info-btn:hover {
    background: #202a34;
    color: #fff;
}
.tvw-designer-4-page__veredelung-info-btn:focus {
    outline: 2px solid #202a34;
    outline-offset: 2px;
}

.tvw-designer-4-page__veredelung-modal {
    position: fixed;
    inset: 0;
    /* Über Shop-Header/Menü (Theme/MU nutzt teils 99999 / 100000) */
    z-index: 200000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    box-sizing: border-box;
}
.tvw-designer-4-page__veredelung-modal[hidden] {
    display: none;
}
.tvw-designer-4-page__veredelung-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}
.tvw-designer-4-page__veredelung-modal-content {
    position: relative;
    width: min(1120px, 94vw);
    max-height: 94vh;
    overflow: auto;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
    padding: 1.5rem 1.75rem 1.85rem;
    box-sizing: border-box;
}
.tvw-designer-4-page__veredelung-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 6px;
    background: #e5e7eb;
    color: #111827;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
}
.tvw-designer-4-page__veredelung-modal-close:hover {
    background: #d1d5db;
}
.tvw-designer-4-page__veredelung-modal-title {
    margin: 0 3rem 0.85rem 0;
    padding-right: 0.25rem;
    color: #202a34;
    font-size: 1.2rem;
    line-height: 1.35;
}
.tvw-designer-4-page__veredelung-modal-lead {
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}
.tvw-designer-4-page__veredelung-modal-lead p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: #334155;
}
.tvw-designer-4-page__veredelung-modal-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem 0;
}
@media (min-width: 768px) {
    .tvw-designer-4-page__veredelung-modal-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem 2rem;
        align-items: start;
    }
}
.tvw-designer-4-page__veredelung-modal-col {
    min-width: 0;
}
.tvw-designer-4-page__veredelung-modal-block {
    margin-bottom: 1.35rem;
}
.tvw-designer-4-page__veredelung-modal-col .tvw-designer-4-page__veredelung-modal-block:last-child {
    margin-bottom: 0;
}
.tvw-designer-4-page__veredelung-modal-block--accent {
    padding: 1rem 1.1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}
.tvw-designer-4-page__veredelung-modal-block--cta {
    padding: 1rem 1.1rem;
    background: #f0f7f4;
    border-left: 3px solid #9a8d84;
    border-radius: 6px;
}
.tvw-designer-4-page__veredelung-modal-h4 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: #202a34;
    line-height: 1.4;
}
.tvw-designer-4-page__veredelung-modal-block p {
    margin: 0 0 0.55rem;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: #334155;
}
.tvw-designer-4-page__veredelung-modal-list {
    margin: 0 0 0.65rem;
    padding-left: 1.2rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #334155;
}
.tvw-designer-4-page__veredelung-modal-list li {
    margin-bottom: 0.35rem;
}
.tvw-designer-4-page__veredelung-modal-list--compact {
    list-style: disc;
}
.tvw-designer-4-page__veredelung-modal-reco {
    margin: 0.5rem 0 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #1e293b;
}

/* Mobile First Nachschärfung: Touch-Ziele, kompaktere Abstände, bessere Lesbarkeit */
@media (max-width: 767px) {
    .tvw-designer-4-page {
        padding: 0.5rem;
    }
    .tvw-designer-4-page__inner {
        padding: 0.85rem;
    }
    .tvw-designer-4-page__title {
        font-size: 1.2rem;
        line-height: 1.25;
    }
    .tvw-designer-4-page__workspace {
        gap: 1rem;
        margin-bottom: 1rem;
    }
    .tvw-designer-4-page__service-note {
        font-size: 0.85rem;
        padding: 0.6rem 0.65rem;
    }
    .tvw-designer-4-page__help-btn {
        min-height: 44px; /* Touch-Target */
        font-size: 0.95rem;
    }
    .tvw-designer-4-page__help-modal {
        padding: 0.5rem;
    }
    .tvw-designer-4-page__help-modal-content {
        width: min(100%, 96vw);
        max-height: 92vh;
        padding: 0.75rem 0.75rem 0.7rem;
    }
    .tvw-designer-4-page__help-modal-content h3 {
        font-size: 0.95rem;
        margin-right: 2rem;
    }
    .tvw-designer-4-page__veredelung-modal {
        padding: 0.65rem;
    }
    .tvw-designer-4-page__veredelung-modal-content {
        width: min(100%, 96vw);
        max-height: 94vh;
        padding: 1.1rem 1.15rem 1.25rem;
    }
    .tvw-designer-4-page__veredelung-modal-title {
        font-size: 1.05rem;
        margin-right: 2.75rem;
        margin-bottom: 0.65rem;
    }
    .tvw-designer-4-page__veredelung-modal-close {
        top: 0.55rem;
        right: 0.55rem;
        width: 34px;
        height: 34px;
    }
    .tvw-designer-4-page__position-grid {
        max-width: 100%;
        gap: 0.75rem;
    }
    .tvw-designer-4-page__position-img,
    .tvw-designer-4-page__position-placeholder,
    .tvw-designer-4-page__position-btn {
        max-width: 100%;
    }
    .tvw-designer-4-page__position-btn {
        min-height: 44px; /* Touch-Target */
    }
    .tvw-designer-4-page__front-detail-btns {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .tvw-designer-4-page__front-detail-btn {
        width: 100%;
        min-height: 42px;
        font-size: 0.8rem;
    }
    .tvw-designer-4-page__stage {
        padding: 0.75rem;
    }
    .tvw-designer-4-page__stage-img-wrap {
        min-height: 160px;
    }
    .tvw-designer-4-page__stage-placeholder {
        padding: 1rem 0.65rem;
    }
    .tvw-designer-4-page__upload-label {
        min-height: 72px;
        padding: 0.75rem 0.8rem;
    }
    .tvw-designer-4-page__promo-banners {
        gap: 0.5rem;
    }
    .tvw-designer-4-page__qty-input {
        width: 3.25rem;
        min-height: 40px;
    }
    .tvw-designer-4-page__sizes-table th,
    .tvw-designer-4-page__sizes-table td {
        padding: 0.45rem 0.5rem;
        font-size: 0.85rem;
    }
    .tvw-designer-4-page__actions {
        gap: 0.5rem;
    }
    .tvw-designer-4-page__actions .tvw-designer-4-back,
    .tvw-designer-4-page__actions .tvw-designer-4-add-color,
    .tvw-designer-4-page__actions .tvw-designer-4-page__btn-request {
        width: 100%;
        min-height: 44px;
        text-align: center;
    }
}

/* Designer-Seite: Packshot, Größe/Menge, Position, Upload */
.tvw-designer-4-page__notice {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 0.9375rem;
}
.tvw-designer-4-page__notice--info { background: #f0f9ff; border-color: #bae6fd; color: #0369a1; }

.tvw-designer-4-page__packshot {
    margin-bottom: 1.5rem;
    text-align: center;
}
.tvw-designer-4-page__packshot-placeholder {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border: 2px dashed #d1d5db;
    border-radius: 6px;
    color: #6b7280;
    font-size: 0.9375rem;
    padding: 1.5rem;
}
.tvw-designer-4-page__packshot-img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin: 0 auto;
}
.tvw-designer-4-page__color-hint {
    margin: 0.25em 0 0;
    font-size: 0.9375rem;
    color: #555;
}
.tvw-designer-4-page__section-title {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
}
.tvw-designer-4-page__sizes {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}
.tvw-designer-4-page__sizes-empty {
    margin: 0;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 6px;
    color: #6b7280;
    font-size: 0.9375rem;
}
.tvw-designer-4-page__sizes-table-wrap {
    overflow-x: auto;
}
.tvw-designer-4-page__sizes-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}
.tvw-designer-4-page__sizes-table th,
.tvw-designer-4-page__sizes-table td {
    padding: 0.5rem 0.75rem;
    text-align: center;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}
.tvw-designer-4-page__sizes-table th {
    font-weight: 600;
    background: #f9fafb;
}
.tvw-designer-4-page__sizes-th-packshot {
    text-align: left;
    width: 1%;
    white-space: nowrap;
}
/* Groessen-Labels in Matrix immer UPPERCASE; "Farbe" bleibt normal */
.tvw-designer-4-page__sizes-table thead th:not(.tvw-designer-4-page__sizes-th-packshot),
.tvw-designer-4-page__qty-size {
    text-transform: uppercase;
}
.tvw-designer-4-page__sizes-packshot {
    text-align: left;
    vertical-align: middle;
}
.tvw-designer-4-page__sizes-design-count {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 6px;
    font-size: 11px;
    line-height: 1.2;
    color: #334155;
    background: #eaf1f9;
    border: 1px solid #d3e0ef;
    border-radius: 6px;
}
.tvw-designer-4-page__sizes-thumb-pair {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tvw-designer-4-page__sizes-packshot-img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}
.tvw-designer-4-page__sizes-packshot-placeholder {
    display: inline-block;
    color: #9ca3af;
}
.tvw-designer-4-page__sizes-color-name {
    display: block;
    font-size: 0.8125rem;
    color: #374151;
    margin-top: 0.25rem;
}
.tvw-designer-4-page__sizes-placement-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 0.5rem;
    max-width: 100%;
}
.tvw-designer-4-page__sizes-placement-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 72px;
    flex: 0 0 auto;
}
.tvw-designer-4-page__sizes-placement-chip-img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
}
.tvw-designer-4-page__sizes-placement-chip-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 6px;
    border: 1px dashed #d1d5db;
    background: #f9fafb;
    color: #9ca3af;
    font-size: 1.25rem;
    line-height: 1;
}
.tvw-designer-4-page__sizes-placement-chip-caption {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.25;
    color: #374151;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
}
.tvw-designer-4-page__sizes-row.tvw-designer-4-page__sizes-row--current {
    background: #f0fdf4;
}
.tvw-designer-4-page__qty-label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
}
.tvw-designer-4-page__qty-input {
    width: 4rem;
    padding: 0.35em;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    text-align: center;
}
.tvw-designer-4-page__position {
    margin-bottom: 1.5rem;
}
.tvw-designer-4-page__position-hint {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: #6b7280;
}
/* Auswahl-Kacheln ~1/3 kleiner, zentriert unter Bühne (auch 22"-Monitore) */
.tvw-designer-4-page__position-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 640px) {
    .tvw-designer-4-page__position-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 428px; /* 4 × 95px + 3 × 1rem */
    }
}
.tvw-designer-4-page__position-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.tvw-designer-4-page__position-img {
    width: 100%;
    max-width: 95px; /* war 140px, ca. 1/3 kleiner */
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}
.tvw-designer-4-page__position-img:hover { box-shadow: 0 0 0 2px rgba(32, 42, 52, 0.25); }
.tvw-designer-4-page__position-img--mirror {
    transform: scaleX(-1);
}
.tvw-designer-4-page__position-placeholder {
    width: 100%;
    max-width: 95px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.25;
    cursor: pointer;
    transition: box-shadow 0.15s;
}
.tvw-designer-4-page__position-placeholder:hover { box-shadow: 0 0 0 2px rgba(32, 42, 52, 0.25); }
/* display:flex oben würde natives [hidden] überschreiben – ohne das bleibt der Hinweis sichtbar trotz Packshot */
.tvw-designer-4-page__position-placeholder[hidden],
.tvw-designer-4-page__position-img[hidden] {
    display: none !important;
}
.tvw-designer-4-page__position-btn {
    width: 100%;
    max-width: 95px;
    padding: 0.5rem 0.35rem;
    border: 1px solid #3d4d5c;
    background: #202A34;
    color: #f3f4f6;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8125rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}
.tvw-designer-4-page__position-btn-line1,
.tvw-designer-4-page__position-btn-line2 {
    display: block;
    line-height: 1.2;
}
.tvw-designer-4-page__position-btn-line2 {
    font-size: 0.75rem;
    color: rgba(243, 244, 246, 0.82);
}
.tvw-designer-4-page__position-btn[aria-pressed="true"] .tvw-designer-4-page__position-btn-line2 {
    color: #4b5563;
}
.tvw-designer-4-page__position-btn:hover {
    background: #2a3544;
    border-color: #5c6d7e;
}
.tvw-designer-4-page__position-btn[aria-pressed="true"] {
    background: #f3f4f6;
    color: #202A34;
    border-color: #202A34;
}
.tvw-designer-4-page__position-selected {
    margin: 0.5rem 0 0;
    font-size: 0.875rem;
    color: #059669;
}

/* Positions-Detail (Akkordeon): Wo auf Vorderseite? / Wo auf Rückseite? – Ärmel ohne Unterposition */
.tvw-designer-4-page__position-detail {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}
.tvw-designer-4-page__front-detail-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.35rem;
}
.tvw-designer-4-page__front-detail-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid #3d4d5c;
    background: #202A34;
    color: #f3f4f6;
    border-radius: 6px;
    font-size: 0.8125rem;
    cursor: pointer;
}
.tvw-designer-4-page__front-detail-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    background: #2a3544;
    border-color: #5c6d7e;
    color: #fff;
}
.tvw-designer-4-page__front-detail-btn[aria-pressed="true"] {
    background: #f3f4f6;
    color: #202A34;
    border-color: #202A34;
    box-shadow: 0 0 0 1px #202A34;
}
.tvw-designer-4-page__front-detail-btn--disabled,
.tvw-designer-4-page__front-detail-btn:disabled,
.tvw-designer-4-page__front-detail-btn[aria-disabled="true"] {
    opacity: 0.65;
    cursor: not-allowed;
    background: #1a2228;
    border-color: #3d4d5c;
    color: rgba(243, 244, 246, 0.45);
}
/* Brustmitte: bereits mit Motiv belegt (dynamisch, nicht Produkt-Sperre) */
.tvw-designer-4-page__front-detail-btn--occupied {
    opacity: 1;
    cursor: not-allowed;
    background: #3f1d1d;
    border-color: #b91c1c;
    color: #fecaca;
    box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.5);
}
.tvw-designer-4-page__front-detail-btn--occupied:hover {
    background: #4a2222;
    border-color: #b91c1c;
    color: #fecaca;
}
.tvw-designer-4-page__tooltip-hint {
    margin: 0.5rem 0 0;
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.35;
    max-width: 100%;
}
.tvw-designer-4-page__sleeve-hint {
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    max-width: 100%;
}

.tvw-designer-4-page__editing-done-hint {
    margin-top: 10px;
    padding: 10px 12px;
    font-size: 0.9375rem;
    color: #374151;
    line-height: 1.45;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 6px;
}
.tvw-designer-4-btn-editing-done:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Bühne: rechte Spalte, große Ansicht */
.tvw-designer-4-page__stage {
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
}
.tvw-designer-4-page__section-subtitle {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
}
.tvw-designer-4-page__stage-caption {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
}
.tvw-designer-4-page__stage-img-wrap {
    position: relative;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}
/* Packshot/Platzhalter nie als Klick-Ziel über dem Motiv (sonst fühlt sich die Bühne „tot“ an). */
.tvw-designer-4-page__stage-img-wrap > .tvw-designer-4-page__stage-img,
.tvw-designer-4-page__stage-img-wrap > .tvw-designer-4-page__stage-placeholder {
    position: relative;
    z-index: 0;
    pointer-events: none;
}
/* Nur das aktive Entwurfs-Logo fängt Klicks – sonst blockiert der Layer Verschieben/Skalieren. */
.tvw-designer-4-page__stage-design-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
/* Schrift-Name/Nummer auf der Bühne (Vorschau + übernommene Einträge) */
.tvw-designer-4-lettering-preview,
.tvw-designer-4-lettering-committed {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    max-width: 88%;
    line-height: 1.12;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.tvw-designer-4-lettering-committed {
    z-index: 1;
    opacity: 0.96;
}
.tvw-designer-4-lettering-preview {
    z-index: 4;
    opacity: 1;
}
/* Schrift als Widget (Entwurf: wie Logo verschiebbar; übernommen: nur Anzeige) */
.tvw-designer-4-lettering-widget {
    position: absolute;
    box-sizing: border-box;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    touch-action: none;
    user-select: none;
}
.tvw-designer-4-lettering-widget__inner {
    text-align: center;
    line-height: 1.12;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    pointer-events: none;
    max-width: 100%;
}
.tvw-designer-4-lettering--committed {
    z-index: 1;
    pointer-events: none;
    cursor: default;
    opacity: 0.96;
}
.tvw-designer-4-lettering--draft {
    z-index: 4;
    pointer-events: auto;
}
.tvw-designer-4-lettering-widget__name {
    font-weight: 700;
    letter-spacing: 0.03em;
}
.tvw-designer-4-lettering-widget__number {
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-top: 4px;
}
.tvw-designer-4-lettering-stage__name {
    font-weight: 700;
    font-size: clamp(11px, 2.8vw, 18px);
    letter-spacing: 0.03em;
}
.tvw-designer-4-lettering-stage__number {
    font-weight: 800;
    font-size: clamp(20px, 7vw, 52px);
    letter-spacing: 0.06em;
    margin-top: 4px;
}
/* Hochgeladenes Logo auf der Bühne: verschieben, skalieren, drehen */
.tvw-designer-4-logo {
    position: absolute;
    box-sizing: border-box;
    z-index: 1;
    cursor: move;
    touch-action: none;
    user-select: none;
}
.tvw-designer-4-logo--committed {
    z-index: 1;
    pointer-events: none;
    cursor: default;
    opacity: 0.97;
}
.tvw-designer-4-logo--draft {
    z-index: 2;
    pointer-events: auto;
}
.tvw-designer-4-logo__img-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}
.tvw-designer-4-logo__img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
.tvw-designer-4-logo__handle {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    background: #fff;
    border: 2px solid #111;
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
}
.tvw-designer-4-logo__handle--nw { left: 0;  top: 0;  cursor: nwse-resize; }
.tvw-designer-4-logo__handle--ne { right: 0; top: 0;  left: auto; cursor: nesw-resize; }
.tvw-designer-4-logo__handle--se { right: 0; bottom: 0; left: auto; top: auto; cursor: nwse-resize; }
.tvw-designer-4-logo__handle--sw { left: 0;  bottom: 0; top: auto; cursor: nesw-resize; }
.tvw-designer-4-logo__handle--rotate {
    left: 50%;
    top: -28px;
    right: auto;
    bottom: auto;
    margin-left: -10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: grab;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2'%3E%3Cpath d='M12 4v4m0 12v4M4 12H0m24 0h-4M6.34 6.34L3.52 3.52m14.14 14.14l2.82-2.82M6.34 17.66l-2.82 2.82m14.14-14.14l2.82 2.82'/%3E%3C/svg%3E") center/12px no-repeat;
}
.tvw-designer-4-logo__handle--rotate:active {
    cursor: grabbing;
}
@media (min-width: 768px) {
    .tvw-designer-4-page__stage-img-wrap {
        min-height:  min(50vh, 400px);
    }
}
.tvw-designer-4-page__stage-img {
    max-width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: contain;
    vertical-align: middle;
}
@media (min-width: 768px) {
    .tvw-designer-4-page__stage-img {
        max-height: 65vh;
    }
}
.tvw-designer-4-page__stage-img--mirror {
    transform: scaleX(-1);
}
.tvw-designer-4-page__stage-placeholder {
    padding: 2rem;
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
}
.tvw-designer-4-page__general-note {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fafafa;
}
.tvw-designer-4-page__general-note-hint {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: #4b5563;
}
.tvw-designer-4-page__general-note-input {
    width: 100%;
    min-height: 74px;
    resize: vertical;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
    background: #fff;
}

.tvw-designer-4-page__upload {
    margin-top: 1.5rem;
    margin-bottom: 0;
}
.tvw-designer-4-page__upload--disabled .tvw-designer-4-page__upload-label {
    pointer-events: none;
    opacity: 0.6;
}
.tvw-designer-4-page__upload--lettering-blocked .tvw-designer-4-page__upload-label {
    pointer-events: none;
    opacity: 0.55;
}
.tvw-designer-4-page__lettering {
    margin-top: 0.85rem;
    padding: 10px 12px;
    border: 1px solid #dbe7f3;
    border-radius: 6px;
    background: #f8fafc;
}
.tvw-designer-4-page__lettering-lead {
    margin: 0 0 8px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #475569;
}
.tvw-designer-4-page__lettering-foil-hint {
    margin: 0 0 10px;
    font-size: 0.78rem;
    line-height: 1.45;
    color: #64748b;
}
.tvw-designer-4-page__lettering-select {
    width: 100%;
    max-width: 280px;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}
.tvw-designer-4-page__lettering-foil-other-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tvw-designer-4-page__lettering-for {
    margin: 0 0 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #202A34;
}
.tvw-designer-4-page__lettering-msg {
    margin: 0 0 8px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #b45309;
}
.tvw-designer-4-page__lettering-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tvw-designer-4-page__lettering-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #334155;
}
.tvw-designer-4-page__lettering-input {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
}
.tvw-designer-4-page__lettering-input:disabled {
    opacity: 0.6;
    background: #f1f5f9;
}
.tvw-designer-4-page__lettering-add {
    margin-top: 6px;
    align-self: flex-start;
}
.tvw-designer-4-page__add-placement-wrap {
    margin-top: 0.75rem;
}

/* Ihre Platzierungen (mehrere Ansichten in einem Abwasch) */
.tvw-designer-4-page__placements {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
}
.tvw-designer-4-page__placements-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}
.tvw-designer-4-page__placements-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
}
.tvw-designer-4-page__placements-item-label {
    flex: 1;
    min-width: 0;
}
.tvw-designer-4-page__placements-item-thumb-wrap {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}
.tvw-designer-4-page__placements-item-thumb {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.tvw-designer-4-page__placements-item-thumb-wrap--lettering {
    background: #e8f4fc;
    border: 1px dashed #7cb3d9;
    color: #1e4976;
    font-size: 1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tvw-designer-4-page__placements-remove {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}
.tvw-designer-4-page__placements-remove:hover {
    background: #e5e7eb;
    color: #111;
}
.tvw-designer-4-page__placements-actions {
    margin: 0.75rem 0 0;
}
.tvw-designer-4-page__placement-limit-notice {
    margin: 10px 0 0;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
    color: #334155;
    background: #f8fafc;
    border: 1px solid #dbe7f3;
    border-radius: 6px;
}
.tvw-designer-4-page__special-request {
    margin-top: 0.9rem;
    border: 1px solid #d7dee7;
    border-radius: 6px;
    background: #f7f9fc;
}
.tvw-designer-4-page__special-request-toggle {
    width: 100%;
    text-align: left;
    border: 0;
    background: #202A34;
    color: #fff;
    padding: 10px 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
}
.tvw-designer-4-page__special-request-content {
    padding: 10px 12px 12px;
}
.tvw-designer-4-page__special-request-text {
    margin: 0 0 8px;
    font-size: 13px;
    color: #334155;
}
.tvw-designer-4-page__special-request-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
.tvw-designer-4-page__special-request-input {
    width: 100%;
    min-height: 74px;
    resize: vertical;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
    box-sizing: border-box;
}
.tvw-designer-4-page__upload-hint {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
}
.tvw-designer-4-page__placement-auto-hint {
    margin: 0.75rem 0 0;
    font-size: 0.84rem;
    line-height: 1.45;
    color: #64748b;
}
.tvw-designer-4-page__upload-zone {
    border: 2px dashed #d1d5db;
    border-radius: 6px;
    padding: 0;
    text-align: center;
    background: #f9fafb;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.tvw-designer-4-page__upload-zone:hover {
    border-color: #202A34;
    box-shadow: 0 0 0 2px rgba(32, 42, 52, 0.12);
    background: #f3f4f6;
}
.tvw-designer-4-page__upload-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 82px;
    padding: 1rem 1.1rem;
    box-sizing: border-box;
}
.tvw-designer-4-page__file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}
.tvw-designer-4-page__upload-text {
    font-size: 0.95rem;
    color: #202A34;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.tvw-designer-4-page__promo-banners {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.tvw-designer-4-page__promo-banners--after-actions {
    margin-top: 1.25rem;
    margin-bottom: 0;
}
@media (min-width: 768px) {
    .tvw-designer-4-page__promo-banners--after-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0.65rem;
    }
    .tvw-designer-4-page__promo-banners--after-actions .tvw-designer-4-page__promo-banner-link {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }
}
.tvw-designer-4-page__request-blocked-hint {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fefce8;
    color: #713f12;
    font-size: 0.88rem;
    line-height: 1.45;
}
.tvw-designer-4-page__request-blocked-hint[hidden] {
    display: none !important;
}
.tvw-designer-4-page__request-blocked-hint-title {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #713f12;
}
.tvw-designer-4-page__request-blocked-list {
    margin: 0;
    padding-left: 1.15rem;
}
.tvw-designer-4-page__request-blocked-list li {
    margin: 0.2rem 0;
}
.tvw-designer-4-page__promo-banner-link {
    display: block;
    width: 100%;
    max-width: none;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tvw-designer-4-page__promo-banner-link:hover {
    border-color: #202A34;
    box-shadow: 0 0 0 1px rgba(32, 42, 52, 0.18);
}
.tvw-designer-4-page__promo-banner-img {
    display: block;
    width: 100%;
    height: auto;
}
.tvw-designer-4-page__actions {
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}
.tvw-designer-4-page__actions .tvw-designer-4-back {
    text-decoration: none;
}
.tvw-designer-4-page__actions .tvw-designer-4-add-color,
.tvw-designer-4-page__actions .tvw-designer-4-page__btn-request {
    background: #202A34;
    border: 1px solid #202A34;
    color: #f3f4f6;
    border-radius: 6px;
}
.tvw-designer-4-page__actions .tvw-designer-4-add-color:hover,
.tvw-designer-4-page__actions .tvw-designer-4-page__btn-request:hover:not(:disabled) {
    background: #2a3544;
    border-color: #2a3544;
    color: #fff;
}
.tvw-designer-4-page__btn-request:disabled {
    cursor: not-allowed;
    opacity: 0.65;
    background: #202A34;
    border-color: #202A34;
    color: rgba(243, 244, 246, 0.75);
}
.tvw-designer-4-page .button:disabled,
.tvw-designer-4-page button:disabled,
.tvw-designer-4-page .button[aria-disabled="true"],
.tvw-designer-4-page button[aria-disabled="true"] {
    background: #202A34 !important;
    border-color: #202A34 !important;
    color: rgba(243, 244, 246, 0.75) !important;
    opacity: 0.72;
}

/* Packshot-Galerie klickbar → Designer (Modus Veredeln) */
body[data-tvw-mode="anfrage"] .tvw-packshot-display .tvw-packshot-gallery {
    cursor: pointer;
}

/* ========== Packshot-Grid (anstelle der Matrix bei Veredeln: nur Farben, Klick → Designer, Hover → Vergrößerung) ========== */
.tvw-designer-packshot-grid-wrap {
    display: none;
    margin-bottom: 1.5rem;
}
body[data-tvw-mode="anfrage"] .tvw-designer-packshot-grid-wrap {
    display: block;
}
/* Nur die Matrix ausblenden bei Veredeln – Produktseite (Preis, Beschreibung, Packshot-Galerie) bleibt */
body[data-tvw-mode="anfrage"] .tvw-sandbox-matrix-wrap {
    display: none !important;
}
.tvw-designer-packshot-grid-lead {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
    color: #6b7280;
}
.tvw-designer-packshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}
@media (min-width: 640px) {
    .tvw-designer-packshot-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1.25rem; }
}
@media (min-width: 1024px) {
    .tvw-designer-packshot-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.5rem; }
}
.tvw-designer-packshot-grid__link {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 6px;
    overflow: hidden;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    transition: transform 0.2s, box-shadow 0.2s;
}
.tvw-designer-packshot-grid__link:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.tvw-designer-packshot-grid__link:focus {
    outline: 2px solid #111;
    outline-offset: 2px;
}
.tvw-designer-packshot-grid__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}
.tvw-designer-packshot-grid__label {
    display: block;
    padding: 0.5rem;
    font-size: 0.8125rem;
    text-align: center;
    color: #374151;
}
/* Hover-Vergrößerung (Overlay) */
#tvw-designer-packshot-hover {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2147483640;
    pointer-events: none;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.2);
    padding: 8px;
    max-width: min(90vw, 400px);
    display: none;
}
#tvw-designer-packshot-hover.is-visible { display: block; }
#tvw-designer-packshot-hover img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}

/* ========== Übertragung: Spinner-Overlay (Thumbs/Upload vor Weiterleitung) ========== */
.tvw-designer-4-submit-busy[hidden] {
    display: none !important;
}
.tvw-designer-4-submit-busy {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    padding: 1rem;
    box-sizing: border-box;
}
.tvw-designer-4-submit-busy__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(32, 42, 52, 0.55);
}
.tvw-designer-4-submit-busy__panel {
    position: relative;
    z-index: 1;
    max-width: 22rem;
    width: 100%;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    padding: 1.5rem 1.25rem;
    text-align: center;
}
.tvw-designer-4-submit-busy__spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    border: 3px solid #e5e7eb;
    border-top-color: #202A34;
    border-radius: 50%;
    animation: tvw-designer-submit-spin 0.8s linear infinite;
}
@keyframes tvw-designer-submit-spin {
    to { transform: rotate(360deg); }
}
.tvw-designer-4-submit-busy__title {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #202A34;
}
.tvw-designer-4-submit-busy__hint {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #6b7280;
}
body.tvw-designer-4-submit-busy--open {
    overflow: hidden;
}