/*
 * Schriftzug-Designer – Storefront
 *
 * Gestaltung nach den Blimmel-Blammel-Stilvorgaben (Stand Oktober 2026):
 * Farben, Schriften, Abstände und Rundungen kommen ausschließlich aus den --bb-* Variablen
 * des Child-Themes. Die Ersatzwerte halten das Plugin auch ohne Theme lesbar.
 * Keine Schatten, keine Verläufe, Übergänge 150 ms.
 * Kundenschriften und Kundenfarben erscheinen nur in der Produktvorschau (und als Schrift-/Farbmuster).
 */

/* Ausgeblendete Elemente bleiben ausgeblendet, auch ohne [hidden]-Reset im Theme */
.schriftzug-designer [hidden],
.schriftzug-confirm[hidden],
.schriftzug-confirm [hidden] {
    display: none !important;
}

.schriftzug-designer,
.schriftzug-modal,
.schriftzug-confirm,
.schriftzug-line-item-img,
.schriftzug-line-item-details,
.schriftzug-swatch-mini {
    /*
     * Farben und Schriften – Reihenfolge je Wert:
     * 1. --schriftzug-*  eigene Variable, nur für den Designer (im Theme auf :root setzen)
     * 2. --bb-*          Variablen des BlimmelTheme und davon abgeleiteter Themes
     * 3. --bs-*          Theme-Variablen von Shopware/Bootstrap (Primärfarbe, Textfarbe, Rahmen, Schrift …)
     * 4. bisheriger Wert (Blimmel-Look)
     * Layout (Abstände, Größen, Breakpoints) kommt nie aus dem Theme.
     */
    --sz-ground: var(--schriftzug-ground, var(--bb-ground, var(--bs-body-bg, #fbf7f1)));
    --sz-surface: var(--schriftzug-surface, var(--bb-surface, var(--bs-white, #ffffff)));
    --sz-surface-alt: var(--schriftzug-surface-alt, var(--bb-surface-alt, var(--bs-tertiary-bg, #f3eadf)));
    --sz-line: var(--schriftzug-line, var(--bb-line, var(--bs-border-color, #e2d3c2)));
    --sz-line-strong: var(--schriftzug-line-strong, var(--bb-line-strong, var(--bs-secondary-color, #9c8572)));
    --sz-ink: var(--schriftzug-ink, var(--bb-ink, var(--bs-body-color, #3b2a20)));
    --sz-ink-soft: var(--schriftzug-ink-soft, var(--bb-ink-soft, var(--bs-body-color, #5e4a3d)));
    --sz-ink-muted: var(--schriftzug-ink-muted, var(--bb-ink-muted, var(--bs-secondary-color, #6e5a4c)));
    --sz-accent: var(--schriftzug-accent, var(--bb-accent, var(--bs-primary, #5a7247)));
    --sz-accent-strong: var(--schriftzug-accent-strong, var(--bb-accent-strong, var(--bs-primary-text-emphasis, #46593a)));
    --sz-accent-tint: var(--schriftzug-accent-tint, var(--bb-accent-tint, var(--bs-primary-bg-subtle, #e8ebdc)));
    --sz-on-accent: var(--schriftzug-on-accent, var(--bb-on-accent, #ffffff));
    --sz-danger: var(--schriftzug-danger, var(--bb-danger, var(--bs-danger, #a33a2b)));
    --sz-font-display: var(--schriftzug-font-display, var(--bb-font-display, var(--bs-body-font-family, "Fraunces", Georgia, serif)));
    --sz-font-body: var(--schriftzug-font-body, var(--bb-font-body, var(--bs-body-font-family, "DM Sans", system-ui, sans-serif)));
    /* Farben ohne passende Theme-Variable (nur eigene Variable, sonst bisheriger Wert) */
    --sz-ring: var(--schriftzug-ring, #ffffff);
    --sz-font-icon: var(--schriftzug-font-icon, Georgia, serif);
    --sz-overlay: var(--schriftzug-overlay, rgba(30, 22, 16, .62));
    --sz-overlay-editor: var(--schriftzug-overlay-editor, rgba(59, 42, 32, .55));
    --sz-space-1: var(--bb-space-1, 4px);
    --sz-space-2: var(--bb-space-2, 8px);
    --sz-space-3: var(--bb-space-3, 12px);
    --sz-space-4: var(--bb-space-4, 16px);
    --sz-space-5: var(--bb-space-5, 24px);
    --sz-space-6: var(--bb-space-6, 32px);
    --sz-radius-md: var(--bb-radius-md, 12px);
    --sz-radius-lg: var(--bb-radius-lg, 16px);
    --sz-radius-xl: var(--bb-radius-xl, 24px);
    --sz-radius-pill: var(--bb-radius-pill, 999px);
    --sz-control-h: var(--bb-control-h, 48px);
    --sz-choice-h: var(--bb-choice-h, 44px);
    --sz-button-h: var(--bb-button-h, 56px);
    --sz-ease: .15s ease;
    /* Seitenverhältnis der Vorschau = Produktfotos (4 : 2,5) */
    --sz-preview-ratio: 8 / 5;

    font-family: var(--sz-font-body);
    font-size: 17px;
    line-height: 1.6;
    color: var(--sz-ink-soft);
}

/* ---------- Bausteine aus den Stilvorgaben (nur innerhalb des Plugins) ---------- */

.schriftzug-designer .bb-label {
    display: flex;
    flex-direction: column;
    gap: var(--sz-space-1);
    margin: 0;
    font: 700 14px/1.4 var(--sz-font-body);
    color: var(--sz-ink);
}

.schriftzug-designer .bb-hint {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--sz-ink-muted);
}

.schriftzug-designer .bb-error {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--sz-danger);
}

.schriftzug-designer .bb-field {
    height: var(--sz-control-h);
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    border: 1px solid var(--sz-line-strong);
    border-radius: var(--sz-radius-md);
    background: var(--sz-surface);
    color: var(--sz-ink);
    font: 400 17px var(--sz-font-body);
    transition: border-color var(--sz-ease), box-shadow var(--sz-ease);
}

.schriftzug-designer .bb-field:focus {
    outline: none;
    border-color: var(--sz-accent);
    box-shadow: 0 0 0 3px var(--sz-accent-tint);
}

.schriftzug-designer .bb-field.is-invalid {
    border-color: var(--sz-danger);
}

.schriftzug-designer select.bb-field {
    appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233b2a20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.schriftzug-designer .bb-choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sz-space-2);
}

.schriftzug-designer .bb-choice {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--sz-radius-pill);
    border: 1px solid var(--sz-line-strong);
    background: var(--sz-surface);
    color: var(--sz-ink);
    font: 700 14px/1.2 var(--sz-font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--sz-ease), background-color var(--sz-ease), color var(--sz-ease);
}

.schriftzug-designer .bb-choice:hover {
    border-color: var(--sz-ink);
}

.schriftzug-designer .bb-choice.is-active,
.schriftzug-designer .bb-choice[aria-pressed="true"],
.schriftzug-designer .bb-choice[aria-checked="true"],
.schriftzug-designer .bb-choice[aria-selected="true"] {
    background: var(--sz-ink);
    border-color: var(--sz-ink);
    color: var(--sz-on-accent);
}

.schriftzug-designer .bb-swatch {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--sz-radius-pill);
    border: 2px solid var(--sz-ring);
    box-shadow: 0 0 0 1px var(--sz-line-strong);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: box-shadow var(--sz-ease);
}

.schriftzug-designer .bb-swatch.is-active,
.schriftzug-designer .bb-swatch[aria-checked="true"] {
    box-shadow: 0 0 0 2px var(--sz-ink);
}

.schriftzug-designer .bb-choice:focus-visible,
.schriftzug-designer .bb-swatch:focus-visible,
.schriftzug-designer .schriftzug-bg-option:focus-visible,
.schriftzug-designer .schriftzug-info-button:focus-visible,
.schriftzug-designer .schriftzug-add-line:focus-visible,
.schriftzug-designer .schriftzug-range:focus-visible {
    outline: 3px solid var(--sz-accent);
    outline-offset: 2px;
}

.schriftzug-designer .bb-note {
    display: flex;
    gap: var(--sz-space-3);
    margin: 0;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--sz-accent-tint);
    color: var(--sz-ink);
    font: 400 14px/1.5 var(--sz-font-body);
}

.schriftzug-designer .bb-panel {
    display: flex;
    flex-direction: column;
    gap: var(--sz-space-4);
    padding: var(--sz-space-5);
    border-radius: var(--sz-radius-xl);
    background: var(--sz-surface);
}

.schriftzug-designer .bb-preview {
    border-radius: var(--sz-radius-xl);
    background-color: var(--sz-surface-alt);
    overflow: hidden;
}

/* ---------- Vorschaufläche ---------- */

.schriftzug-preview {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    padding: var(--sz-space-4);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.schriftzug-preview-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sz-space-2);
}

.schriftzug-preview-label,
.schriftzug-bg-label {
    padding: 2px 10px;
    border-radius: var(--sz-radius-pill);
    background: var(--sz-surface);
    color: var(--sz-ink-muted);
    font-size: 13px;
    line-height: 1.5;
    white-space: nowrap;
}

.schriftzug-bg-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--sz-space-1);
    margin-left: auto;
}

.schriftzug-bg-switch {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sz-space-2);
    padding: var(--sz-space-1);
    border-radius: var(--sz-radius-pill);
    background: var(--sz-surface);
}

.schriftzug-bg-option {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--sz-radius-pill);
    border: 2px solid var(--sz-ring);
    box-shadow: 0 0 0 1px var(--sz-line-strong);
    background-color: var(--sz-surface-alt);
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: box-shadow var(--sz-ease);
}

.schriftzug-bg-option.is-active {
    box-shadow: 0 0 0 3px var(--sz-ink);
}

.schriftzug-bg-plain {
    background-image: none;
    background-color: var(--sz-surface-alt);
}

.schriftzug-preview-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 160px;
}

.schriftzug-preview-canvas {
    position: absolute;
    inset: var(--sz-space-2) 2.25rem 1.75rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--sz-ease);
}

.schriftzug-designer.is-loading .schriftzug-preview-canvas,
.schriftzug-modal.is-loading .schriftzug-preview-canvas {
    opacity: .45;
}

.schriftzug-preview-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.schriftzug-preview-empty {
    padding: var(--sz-space-5);
    text-align: center;
    color: var(--sz-ink-muted);
    font-size: 15px;
}

/* Maßlinien – Position und Länge setzt das Script passend zum Schriftzug */
.schriftzug-dimension {
    position: absolute;
    display: flex;
    justify-content: center;
    color: var(--sz-ink);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.schriftzug-dimension span {
    padding: 0 6px;
    border-radius: 6px;
    background: var(--sz-surface);
}

.schriftzug-dimension span:empty,
.schriftzug-dimension:has(> span:empty) {
    display: none;
}

.schriftzug-dimension-width {
    left: 0;
    top: 0;
    width: 0;
    padding-top: var(--sz-space-1);
    border-top: 1px solid var(--sz-ink-soft);
    align-items: flex-start;
}

.schriftzug-dimension-height {
    left: 0;
    top: 0;
    height: 0;
    width: 2rem;
    padding-left: var(--sz-space-1);
    border-left: 1px solid var(--sz-ink-soft);
    align-items: center;
    writing-mode: vertical-rl;
}

.schriftzug-dimension-width::before,
.schriftzug-dimension-width::after,
.schriftzug-dimension-height::before,
.schriftzug-dimension-height::after {
    content: "";
    position: absolute;
    background: var(--sz-ink-soft);
}

.schriftzug-dimension-width::before,
.schriftzug-dimension-width::after {
    top: -5px;
    width: 1px;
    height: 9px;
}

.schriftzug-dimension-width::before {
    left: 0;
}

.schriftzug-dimension-width::after {
    right: 0;
}

.schriftzug-dimension-height::before,
.schriftzug-dimension-height::after {
    left: -5px;
    width: 9px;
    height: 1px;
}

.schriftzug-dimension-height::before {
    top: 0;
}

.schriftzug-dimension-height::after {
    bottom: 0;
}

/* Hinweis bei Farben mit Bild (Gold, Silber …) */
.schriftzug-image-color-hint {
    position: relative;
    z-index: 2;
    margin-top: var(--sz-space-2);
    padding: 10px 14px;
    border-radius: var(--sz-radius-md);
    background: var(--sz-accent-tint);
    color: var(--sz-ink);
    font-size: 13px;
    line-height: 1.45;
}

@container sz-stage (min-width: 640px) {
    .schriftzug-image-color-hint {
        position: absolute;
        top: 3.25rem;
        left: var(--sz-space-4);
        max-width: min(22rem, 50%);
        margin-top: 0;
    }
}

/* Konturansicht: weiße Fläche, nur die Schnittlinie */
.schriftzug-preview.is-outline {
    background-color: var(--sz-surface) !important;
    background-image: none !important;
    outline: 1px solid var(--sz-line);
    outline-offset: -1px;
}


/* ---------- Eingabebereich ---------- */

.schriftzug-field {
    display: flex;
    flex-direction: column;
    gap: var(--sz-space-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

/* 4 px vom Label zum Feld */
.schriftzug-field > .bb-label + * {
    margin-top: calc(var(--sz-space-1) - var(--sz-space-2));
}

/* Text und Zeilen */
.schriftzug-lines {
    display: grid;
    gap: var(--sz-space-2);
}

.schriftzug-line {
    display: flex;
    gap: var(--sz-space-2);
}

.schriftzug-line .schriftzug-text-input {
    flex: 1 1 auto;
    min-width: 0;
}

.schriftzug-designer .schriftzug-line-remove {
    flex: 0 0 auto;
    width: var(--sz-control-h);
    height: var(--sz-control-h);
    padding: 0;
    border-radius: var(--sz-radius-md);
    font-size: 22px;
    font-weight: 400;
}

.schriftzug-field-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--sz-space-4);
}

.schriftzug-counter {
    margin-left: auto;
    white-space: nowrap;
}

.schriftzug-message {
    display: none;
}

.schriftzug-message.is-visible {
    display: block;
}

.schriftzug-add-line {
    align-self: flex-start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sz-accent);
    font: 700 15px/1.4 var(--sz-font-body);
    cursor: pointer;
}

.schriftzug-add-line:hover {
    color: var(--sz-accent-strong);
    text-decoration: underline;
}

.schriftzug-line-options {
    display: flex;
    flex-direction: column;
    gap: var(--sz-space-1);
    margin-top: var(--sz-space-2);
}

/* Schriftarten: Kategorie-Knöpfe und Kacheln in der eigenen Schrift (wie Stickerbogen-Designer) */
.schriftzug-fontgroups {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sz-space-1);
    margin-bottom: var(--sz-space-1);
    padding: 0 2px;
}

/* Kategorie-Knöpfe und Kacheln in denselben Spalten → links und rechts bündig */
.schriftzug-font-field[style*="--sz-font-cols"] .schriftzug-fontgroups {
    display: grid;
    grid-template-columns: repeat(var(--sz-font-cols), minmax(0, 1fr));
}

.schriftzug-font-field[style*="--sz-font-cols"] .schriftzug-fontlist {
    grid-template-columns: repeat(var(--sz-font-cols), minmax(0, 1fr));
}

.schriftzug-fontgroup {
    flex: 1 1 0;
    min-width: 0;
    height: 32px;
    padding: 0 var(--sz-space-3);
    border: 1px solid var(--sz-line-strong);
    border-radius: var(--sz-radius-pill);
    background: var(--sz-surface);
    color: var(--sz-ink);
    font: 600 13px/1 var(--sz-font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--sz-ease), background-color var(--sz-ease), color var(--sz-ease);
}

.schriftzug-fontgroup {
    overflow: hidden;
    text-overflow: ellipsis;
}

.schriftzug-fontgroup:hover {
    border-color: var(--sz-ink);
}

.schriftzug-fontgroup.is-active {
    border-color: var(--sz-ink);
    background: var(--sz-ink);
    color: var(--sz-on-accent);
}

.schriftzug-fontlist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--sz-space-1);
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px;
}

.schriftzug-font {
    min-width: 0;
    min-height: var(--sz-choice-h);
    padding: var(--sz-space-1) var(--sz-space-2);
    border: 1px solid var(--sz-line-strong);
    border-radius: var(--sz-radius-md);
    background: var(--sz-surface);
    color: var(--sz-ink);
    cursor: pointer;
    transition: border-color var(--sz-ease), background-color var(--sz-ease);
}

.schriftzug-font[hidden] {
    display: none;
}

.schriftzug-font:hover {
    border-color: var(--sz-ink);
}

.schriftzug-font.is-active {
    border: 2px solid var(--sz-ink);
    background: var(--sz-surface-alt);
}

.schriftzug-fontgroup:focus-visible,
.schriftzug-font:focus-visible {
    outline: none;
    border-color: var(--sz-accent);
    box-shadow: 0 0 0 3px var(--sz-accent-tint);
}

.schriftzug-font-sample {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px;
    line-height: 1.2;
}

/* Größe */
.schriftzug-slider-row {
    display: flex;
    align-items: center;
    gap: var(--sz-space-3);
}

.schriftzug-range {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    accent-color: var(--sz-accent);
    cursor: pointer;
}

.schriftzug-size-input {
    position: relative;
    flex: 0 0 120px;
}

.schriftzug-designer .schriftzug-size-input .bb-field {
    padding-right: 40px;
}

.schriftzug-unit {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--sz-ink-muted);
    font-size: 15px;
    pointer-events: none;
}

.schriftzug-size-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sz-space-2);
}

.schriftzug-size-summary > div {
    display: flex;
    flex-direction: column;
    padding: var(--sz-space-2) var(--sz-space-3);
    border-radius: var(--sz-radius-md);
    background: var(--sz-surface-alt);
    color: var(--sz-ink-muted);
    font-size: 13px;
    line-height: 1.4;
}

.schriftzug-size-summary strong {
    color: var(--sz-ink);
    font-size: 17px;
}

/* Abstände */
.schriftzug-spacing {
    display: grid;
    gap: var(--sz-space-3);
}

.schriftzug-option-head {
    display: flex;
    align-items: center;
    gap: var(--sz-space-2);
}

.schriftzug-option-label {
    margin: 0;
    color: var(--sz-ink);
    font-size: 15px;
}

/* Farben */
.schriftzug-color-name {
    font-weight: 400;
    color: var(--sz-ink-soft);
}

.schriftzug-color-list {
    padding: 3px;
}

/* Info-Hinweis (ⓘ) – Laufweite, Zeilenabstand, Holzart */
.schriftzug-info {
    position: relative;
    display: inline-flex;
}

.schriftzug-info-button {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 2px solid var(--sz-line-strong);
    border-radius: var(--sz-radius-pill);
    background: var(--sz-surface);
    color: var(--sz-ink-muted);
    font: italic 700 12px/1 var(--sz-font-icon);
    cursor: pointer;
    transition: border-color var(--sz-ease), color var(--sz-ease);
}

.schriftzug-info-button:hover,
.schriftzug-info.is-open .schriftzug-info-button {
    border-color: var(--sz-accent);
    color: var(--sz-accent);
}

.schriftzug-info-text {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    z-index: 20;
    width: max-content;
    max-width: min(18rem, 70vw);
    transform: translateX(-50%);
    padding: 10px 14px;
    border-radius: var(--sz-radius-md);
    background: var(--sz-ink);
    color: var(--sz-on-accent);
    font: 400 13px/1.45 var(--sz-font-body);
    white-space: pre-line;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sz-ease);
}

.schriftzug-info-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: var(--sz-ink);
}

.schriftzug-info:hover .schriftzug-info-text,
.schriftzug-info-button:focus-visible + .schriftzug-info-text,
.schriftzug-info.is-open .schriftzug-info-text {
    visibility: visible;
    opacity: 1;
}

/* Preis */
.schriftzug-price-box {
    display: flex;
    flex-direction: column;
    gap: var(--sz-space-1);
    padding-top: var(--sz-space-5);
    border-top: 1px solid var(--sz-line);
}

.schriftzug-price-total {
    font: 600 36px/1.1 var(--sz-font-display);
    color: var(--sz-ink);
}

.schriftzug-price-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--sz-space-4);
}

/* In den Warenkorb – der Button selbst kommt aus dem Theme */
.schriftzug-buy-row {
    display: flex;
    gap: var(--sz-space-2);
}

.schriftzug-quantity {
    flex: 0 0 88px;
}

.schriftzug-designer .schriftzug-quantity .bb-field {
    height: var(--sz-button-h);
    text-align: center;
}

.schriftzug-buy-button {
    flex: 1 1 auto;
    min-height: var(--sz-button-h);
}

/* ---------- Merkzettel und Produktnummer im Bestellkasten ---------- */

.schriftzug-product-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sz-space-2) var(--sz-space-4);
    margin-top: var(--sz-space-4);
    padding-top: var(--sz-space-4);
    border-top: 1px solid var(--sz-line);
    font-size: 14px;
    color: var(--sz-ink-soft);
}

.schriftzug-product-meta .product-wishlist {
    margin: 0;
}

.schriftzug-product-meta .product-detail-ordernumber-container {
    margin: 0;
}

.schriftzug-product-meta .product-detail-ordernumber-label {
    font-weight: 600;
}

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

.schriftzug-line-item-img {
    object-fit: contain;
    padding: 4px;
    border-radius: var(--bb-radius-md, 12px);
    background: var(--sz-surface-alt);
}

.schriftzug-line-item-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--bb-space-2, 8px);
    margin: var(--bb-space-1, 4px) 0 0;
    font-size: 14px;
}

.schriftzug-line-item-details dt {
    font-weight: 400;
    color: var(--sz-ink-muted);
}

.schriftzug-line-item-details dd {
    margin: 0;
    color: var(--sz-ink);
}

.schriftzug-swatch-mini {
    display: inline-block;
    width: .8em;
    height: .8em;
    margin-right: .2em;
    border-radius: 50%;
    border: 1px solid var(--sz-line-strong);
    vertical-align: -.05em;
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 575.98px) {
    .schriftzug-designer .bb-panel {
        padding: var(--sz-space-4);
    }

    .schriftzug-bg-label {
        font-size: 12px;
    }

    .schriftzug-bg-option {
        width: 28px;
        height: 28px;
    }

    .schriftzug-slider-row {
        flex-wrap: wrap;
    }

    .schriftzug-size-input {
        flex-basis: 100%;
    }

    .schriftzug-price-total {
        font-size: 30px;
    }
}


/* ---------- Wasserzeichen (Einstellung „auch in der Live-Vorschau“) ---------- */

.schriftzug-preview-stage {
    position: relative;
}

.schriftzug-watermark {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-repeat: repeat;
    background-position: center;
}

/* ---------- Prüf-Fenster vor dem Warenkorb ---------- */

html.schriftzug-confirm-open,
html.schriftzug-confirm-open body {
    overflow: hidden;
}

.schriftzug-confirm {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sz-space-4);
}

.schriftzug-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: var(--sz-overlay);
}

.schriftzug-confirm-dialog {
    position: relative;
    width: 100%;
    max-width: 1120px;
    max-height: calc(100vh - 2 * var(--sz-space-4));
    overflow-y: auto;
    padding: var(--sz-space-5);
    border-radius: var(--sz-radius-lg);
    background: var(--sz-surface);
    color: var(--sz-ink-soft);
}

.schriftzug-confirm-title {
    margin: 0 0 var(--sz-space-2);
    font-family: var(--sz-font-display);
    font-size: 28px;
    line-height: 1.2;
    color: var(--sz-ink);
}

.schriftzug-confirm-intro {
    margin: 0 0 var(--sz-space-4);
}

.schriftzug-confirm-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border-radius: var(--sz-radius-md);
    background: var(--sz-surface-alt);
}

.schriftzug-confirm-image > img,
.schriftzug-confirm-image > svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.schriftzug-confirm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--sz-ink-muted);
}

.schriftzug-confirm-visual {
    margin: var(--sz-space-2) 0 var(--sz-space-4);
    font-size: 14px;
    color: var(--sz-ink-muted);
}

.schriftzug-confirm-summary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--sz-space-1) var(--sz-space-4);
    margin: 0 0 var(--sz-space-4);
}

.schriftzug-confirm-summary dt {
    font-weight: 600;
    color: var(--sz-ink);
}

.schriftzug-confirm-summary dd {
    margin: 0;
}

.schriftzug-confirm-summary .schriftzug-confirm-text {
    font-size: 19px;
    font-weight: 600;
    color: var(--sz-ink);
    word-break: break-word;
}

.schriftzug-confirm-warning {
    margin: 0 0 var(--sz-space-3);
    padding: var(--sz-space-3) var(--sz-space-4);
    border: 2px solid var(--sz-danger);
    border-radius: var(--sz-radius-md);
    color: var(--sz-danger);
}

.schriftzug-confirm-returns,
.schriftzug-confirm-mail {
    margin: 0 0 var(--sz-space-3);
    font-size: 15px;
}

.schriftzug-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sz-space-3);
    margin-top: var(--sz-space-4);
}

.schriftzug-confirm-actions .btn {
    min-height: var(--sz-button-h);
    padding-left: var(--sz-space-5);
    padding-right: var(--sz-space-5);
}

.schriftzug-confirm-dialog:focus {
    outline: none;
}

.schriftzug-confirm-body {
    display: grid;
    gap: var(--sz-space-2) var(--sz-space-5);
    align-items: start;
}

@media (min-width: 900px) {
    .schriftzug-confirm-body {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }

    .schriftzug-confirm-summary {
        margin-top: 0;
    }
}

@media (max-width: 575.98px) {
    .schriftzug-confirm {
        padding: 0;
        align-items: stretch;
    }

    .schriftzug-confirm-dialog {
        max-height: 100vh;
        border-radius: 0;
        padding: var(--sz-space-4);
    }

    .schriftzug-confirm-title {
        font-size: 22px;
    }

    .schriftzug-confirm-actions {
        flex-direction: column-reverse;
    }

    .schriftzug-confirm-actions .btn {
        width: 100%;
    }
}

/* ---------- Zoom in der Vorschau ---------- */

.schriftzug-preview-stage {
    overflow: hidden;
    touch-action: pan-y;
}

.schriftzug-preview-stage.is-zoomed {
    touch-action: none;
    cursor: grab;
}

.schriftzug-preview-stage.is-zoomed.is-panning {
    cursor: grabbing;
}

.schriftzug-preview-stage.is-zoomed .schriftzug-dimension {
    display: none;
}

/* Kein will-change: sonst bleibt die Schrift beim Zoomen unscharf */

/* ---------- Prüfungen ---------- */

.schriftzug-check-message.is-visible {
    padding: var(--sz-space-3) var(--sz-space-4);
    border: 2px solid var(--sz-danger);
    border-radius: var(--sz-radius-md);
    color: var(--sz-danger);
    font-size: 15px;
}

.schriftzug-check-message.is-visible.is-pending {
    border-color: var(--sz-line);
    color: var(--sz-ink-muted);
}

/* ---------- Gestaltung speichern ---------- */

.schriftzug-share {
    display: grid;
    gap: var(--sz-space-2);
}

.schriftzug-share-button {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--sz-accent-strong);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.schriftzug-share-panel {
    display: grid;
    gap: var(--sz-space-2);
    padding: var(--sz-space-3) var(--sz-space-4);
    border-radius: var(--sz-radius-md);
    background: var(--sz-surface-alt);
}

.schriftzug-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sz-space-2);
}

.schriftzug-share-row .bb-field {
    flex: 1 1 220px;
    min-width: 0;
}


/* Hinweis „Steg angepasst“ */
.schriftzug-bar-hint {
    display: block;
    margin-top: var(--sz-space-1);
    color: var(--sz-accent-strong);
}


/* =====================================================================
   Aufbau ab 2.5.0 – wie der Stickerbogen-Designer
   Produktseite: Vorschau, „Jetzt gestalten“, Preis, Warenkorb.
   Editor im Vollbild: Kopf · links die Fläche (so groß wie möglich) mit Ansicht/Zoom darunter ·
   rechts Reiter mit den Einstellungen, darunter Preis und „Fertig“.
   ===================================================================== */

/* ---------- Kaufbereich ---------- */

.schriftzug-designer .schriftzug-buy {
    margin-bottom: var(--sz-space-5);
}

.schriftzug-teaser {
    display: block;
    width: 100%;
    margin: 0;
    padding: var(--sz-space-4);
    border: 0;
    border-radius: var(--sz-radius-xl);
    background: var(--sz-surface-alt);
    cursor: pointer;
    transition: background-color var(--sz-ease);
}

.schriftzug-teaser:hover {
    background: var(--sz-line);
}

.schriftzug-teaser-preview {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: var(--sz-preview-ratio);
    max-height: 340px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--sz-radius-lg);
    background-size: cover;
    background-position: center;
}

.schriftzug-teaser-preview.is-outline {
    background-color: var(--sz-surface);
}

.schriftzug-teaser-preview svg {
    display: block;
    width: 100%;
    height: 100%;
}

.schriftzug-teaser-empty {
    padding: var(--sz-space-1) var(--sz-space-3);
    border-radius: var(--sz-radius-pill);
    background: var(--sz-surface);
    color: var(--sz-ink-muted);
    font-size: 13px;
    white-space: nowrap;
}

.schriftzug-designer .schriftzug-open {
    width: 100%;
    min-height: var(--sz-choice-h);
    border-radius: var(--sz-radius-lg);
    font: 700 17px/1.2 var(--sz-font-body);
}

.schriftzug-teaser-info {
    margin: calc(var(--sz-space-2) * -1) 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sz-ink-soft);
    overflow-wrap: anywhere;
}

.schriftzug-designer .schriftzug-price-box {
    padding-top: var(--sz-space-4);
    border-top: 1px solid var(--sz-line);
}

.schriftzug-buy-hint {
    margin: calc(var(--sz-space-2) * -1) 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--sz-ink-soft);
}

.schriftzug-buy-hint[hidden] {
    display: none;
}

html.schriftzug-noscroll,
html.schriftzug-noscroll body {
    overflow: hidden;
}

/* ---------- Vollbild-Editor ---------- */

.schriftzug-designer.schriftzug-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: var(--sz-overlay-editor);
    font-size: 15px;
    line-height: 1.5;
    color: var(--sz-ink);
}

.schriftzug-designer.schriftzug-modal[hidden] {
    display: none !important;
}

.schriftzug-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--sz-ground);
    outline: none;
}

.schriftzug-header {
    display: flex;
    align-items: center;
    gap: var(--sz-space-2);
    padding: var(--sz-space-2) var(--sz-space-3);
    border-bottom: 1px solid var(--sz-line);
    background: var(--sz-surface);
}

.schriftzug-title {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.schriftzug-title-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.schriftzug-title-main {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font: 600 18px/1.3 var(--sz-font-display);
    color: var(--sz-ink);
}

.schriftzug-head-note {
    display: none;
    margin: 0;
    color: var(--sz-ink-soft);
    font-size: 12px;
    line-height: 1.35;
}

.schriftzug-title-sub {
    color: var(--sz-ink-muted);
    font-size: 13px;
    line-height: 1.4;
    min-height: 1.4em;
}

.schriftzug-tools {
    display: flex;
    gap: var(--sz-space-2);
}

.schriftzug-tool,
.schriftzug-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--sz-line-strong);
    border-radius: var(--sz-radius-pill);
    background: var(--sz-surface);
    color: var(--sz-ink);
    font: 400 20px/1 var(--sz-font-body);
    cursor: pointer;
    transition: border-color var(--sz-ease);
}

.schriftzug-tool:hover:not(:disabled),
.schriftzug-close:hover {
    border-color: var(--sz-ink);
}

.schriftzug-tool:disabled {
    opacity: .4;
    cursor: default;
}

.schriftzug-close {
    font-size: 26px;
}

.schriftzug-reset {
    flex: 0 0 auto;
    padding: 0 var(--sz-space-2);
    border: 0;
    background: none;
    color: var(--sz-accent);
    font: 700 15px/1.2 var(--sz-font-body);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    cursor: pointer;
}

.schriftzug-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.schriftzug-stagecol {
    container: sz-stage / inline-size;
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    background: var(--sz-surface-alt);
}

.schriftzug-modal .schriftzug-preview {
    min-height: 0;
    height: 42vh;
    border-radius: 0;
}

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

.schriftzug-view {
    display: flex;
    align-items: center;
    gap: 4px;
}

.schriftzug-view-label {
    margin-right: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--sz-ink);
}

.schriftzug-view-button {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--sz-line-strong);
    border-radius: var(--sz-radius-pill);
    background: var(--sz-surface);
    color: var(--sz-ink);
    font: 600 12px/1 var(--sz-font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--sz-ease), background-color var(--sz-ease), color var(--sz-ease);
}

.schriftzug-view-button:hover {
    border-color: var(--sz-ink);
}

.schriftzug-view-button.is-active {
    border-color: var(--sz-ink);
    background: var(--sz-ink);
    color: var(--sz-on-accent);
}

.schriftzug-legend {
    display: none;
    flex: 1 1 200px;
    min-width: 0;
    margin: 0;
    color: var(--sz-ink-soft);
    font-size: 12px;
    line-height: 1.3;
}

/* Zoom-Leiste: − Regler + Prozent ⤢ */
.schriftzug-zoom {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 6px 2px 2px;
    border: 1px solid var(--sz-line);
    border-radius: var(--sz-radius-pill);
    background: var(--sz-surface);
}

.schriftzug-zoom-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--sz-radius-pill);
    background: transparent;
    color: var(--sz-ink);
    font: 700 16px/1 var(--sz-font-body);
    cursor: pointer;
}

.schriftzug-zoom-btn:hover:not(:disabled) {
    background: var(--sz-surface-alt);
}

.schriftzug-zoom-btn:disabled {
    opacity: .4;
    cursor: default;
}

.schriftzug-designer .schriftzug-zoom-range {
    flex: 0 0 auto;
    width: 110px;
}

.schriftzug-zoom-value {
    min-width: 3.4em;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--sz-ink);
}

/* Handy/Tablet: zwei Finger zoomen, ein Finger verschiebt – nur „ganze Fläche“ bleibt */
@media (hover: none) and (pointer: coarse) {
    .schriftzug-zoom-step,
    .schriftzug-designer .schriftzug-zoom-range,
    .schriftzug-zoom-value {
        display: none;
    }

    .schriftzug-zoom:not(:has(.schriftzug-zoom-reset:not([hidden]))) {
        display: none;
    }
}

.schriftzug-rightcol {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.schriftzug-side {
    flex: 1 0 auto;
    padding: var(--sz-space-3) var(--sz-space-4) var(--sz-space-5);
    background: var(--sz-surface);
}

.schriftzug-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 var(--sz-space-4);
}

.schriftzug-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--sz-line-strong);
    border-radius: var(--sz-radius-pill);
    background: var(--sz-surface);
    color: var(--sz-ink);
    font: 700 13px/1.2 var(--sz-font-body);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--sz-ease), border-color var(--sz-ease), color var(--sz-ease);
}

.schriftzug-tab:hover {
    border-color: var(--sz-ink);
}

.schriftzug-tab.is-active {
    border-color: var(--sz-ink);
    background: var(--sz-ink);
    color: var(--sz-on-accent);
}

.schriftzug-tab-pane[hidden] {
    display: none !important;
}

.schriftzug-tab-pane {
    display: flex;
    flex-direction: column;
    gap: var(--sz-space-5);
}

.schriftzug-tab-pane .schriftzug-field {
    margin-top: 0;
}

.schriftzug-side .schriftzug-check-message.is-visible {
    margin-bottom: var(--sz-space-3);
}

.schriftzug-footer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: var(--sz-space-3);
    padding: var(--sz-space-2) var(--sz-space-3);
    border-top: 1px solid var(--sz-line);
    background: var(--sz-surface);
}

.schriftzug-foot-price {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    white-space: nowrap;
}

.schriftzug-foot-price strong {
    font: 600 22px/1.1 var(--sz-font-display);
    color: var(--sz-ink);
}

.schriftzug-foot-price span {
    font-size: 11px;
    color: var(--sz-ink-muted);
}

.schriftzug-modal .schriftzug-done {
    flex: 1 1 auto;
    min-height: var(--sz-choice-h);
    border: 1px solid var(--sz-accent);
    border-radius: var(--sz-radius-lg);
    background: var(--sz-accent);
    color: var(--sz-on-accent);
    font: 700 17px/1.2 var(--sz-font-body);
    box-shadow: none;
}

.schriftzug-modal .schriftzug-done:hover,
.schriftzug-modal .schriftzug-done:focus-visible {
    border-color: var(--sz-accent-strong);
    background: var(--sz-accent-strong);
    color: var(--sz-on-accent);
}

.schriftzug-tool:focus-visible,
.schriftzug-close:focus-visible,
.schriftzug-reset:focus-visible,
.schriftzug-tab:focus-visible,
.schriftzug-view-button:focus-visible,
.schriftzug-zoom-btn:focus-visible,
.schriftzug-teaser:focus-visible,
.schriftzug-modal .schriftzug-done:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--sz-accent-tint);
}

@media (max-width: 575.98px) {
    .schriftzug-header .schriftzug-reset {
        font-size: 13px;
        padding: 0 2px;
    }

    .schriftzug-tools {
        gap: 4px;
    }

    .schriftzug-view-label {
        display: none;
    }

    .schriftzug-tabs {
        flex-wrap: nowrap;
    }

    .schriftzug-tab {
        padding: 0 6px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---------- PC: Fläche links, Einstellungen rechts ---------- */

@media (min-width: 992px) {
    .schriftzug-dialog {
        height: calc(100% - var(--sz-space-6));
        margin: var(--sz-space-4);
        border-radius: var(--sz-radius-xl);
        overflow: hidden;
    }

    .schriftzug-header {
        gap: var(--sz-space-3);
        padding: var(--sz-space-2) var(--sz-space-4);
    }

    .schriftzug-title-row {
        flex-direction: row;
        align-items: center;
        gap: var(--sz-space-4);
    }

    .schriftzug-title-main {
        flex: 0 0 auto;
        font-size: 20px;
    }

    .schriftzug-head-note {
        display: block;
        max-width: 560px;
    }

    .schriftzug-body {
        flex-direction: row;
        gap: var(--sz-space-3);
        padding: var(--sz-space-3);
        overflow: hidden;
    }

    .schriftzug-stagecol {
        position: static;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        background: none;
    }

    .schriftzug-modal .schriftzug-preview {
        flex: 1 1 auto;
        height: auto;
        border-radius: var(--sz-radius-xl);
    }

    .schriftzug-stagebar {
        flex-wrap: nowrap;
        padding: 6px 4px 0;
    }

    .schriftzug-legend {
        display: block;
    }

    .schriftzug-rightcol {
        flex: 0 0 clamp(460px, 46%, 960px);
        min-height: 0;
        gap: var(--sz-space-3);
    }

    .schriftzug-side {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--sz-space-4) var(--sz-space-5) var(--sz-space-5);
        border-radius: var(--sz-radius-xl);
    }

    .schriftzug-footer {
        position: static;
        flex: 0 0 auto;
        padding: var(--sz-space-2) var(--sz-space-3);
        border: 0;
        border-radius: var(--sz-radius-xl);
    }

    .schriftzug-tab {
        font-size: 14px;
    }
}



/* ---------- 2.5.3: Holzart als Knöpfe, Anzahl und „In den Warenkorb“ im Editor ---------- */

.schriftzug-designer .schriftzug-wood-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--sz-space-1);
}

.schriftzug-designer .schriftzug-wood-option {
    justify-content: flex-start;
    height: auto;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: var(--sz-radius-md);
    text-align: left;
    white-space: normal;
    line-height: 1.25;
}

.schriftzug-qty {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    height: var(--sz-choice-h);
    border: 1px solid var(--sz-line-strong);
    border-radius: var(--sz-radius-pill);
    background: var(--sz-surface);
}

.schriftzug-qty-btn {
    width: 40px;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: var(--sz-radius-pill);
    background: transparent;
    color: var(--sz-ink);
    font: 700 18px/1 var(--sz-font-body);
    cursor: pointer;
}

.schriftzug-qty-btn:hover:not(:disabled) {
    background: var(--sz-surface-alt);
}

.schriftzug-qty-btn:disabled {
    opacity: .35;
    cursor: default;
}

.schriftzug-qty-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--sz-accent-tint);
}

.schriftzug-qty-value {
    min-width: 2ch;
    text-align: center;
    font: 700 16px/1 var(--sz-font-body);
    font-variant-numeric: tabular-nums;
    color: var(--sz-ink);
}

.schriftzug-modal .schriftzug-done:disabled {
    opacity: .45;
    cursor: default;
}

/* Prüf-Fenster liegt über dem Editor */
.schriftzug-confirm {
    z-index: 1110;
}

/* ---------- Großer Monitor (ab 1600 px) ---------- */

@media (min-width: 992px) {
    /* Untere Zeile links und rechts gleich hoch, alle Bedienelemente 44 px */
    .schriftzug-stagecol {
        gap: var(--sz-space-3);
    }

    .schriftzug-stagebar {
        flex: 0 0 auto;
        box-sizing: border-box;
        height: 60px;
        padding: 0 var(--sz-space-3);
        border-radius: var(--sz-radius-xl);
        background: var(--sz-surface);
    }

    .schriftzug-footer {
        box-sizing: border-box;
        height: 60px;
        padding: 0 var(--sz-space-2) 0 var(--sz-space-4);
    }

    .schriftzug-view-button,
    .schriftzug-zoom,
    .schriftzug-qty,
    .schriftzug-modal .schriftzug-done {
        box-sizing: border-box;
        height: 44px;
        min-height: 44px;
    }

    .schriftzug-view-button {
        padding: 0 16px;
        font-size: 14px;
    }

    .schriftzug-zoom-btn {
        height: 38px;
        min-width: 38px;
    }

    .schriftzug-modal .schriftzug-done {
        flex: 1 1 auto;
        padding: 0 var(--sz-space-4);
    }

    /* Preis steht als Badge auf der Fläche */
    .schriftzug-foot-price {
        display: none;
    }

    /* Schriftliste füllt die Spalte bis unten, scrollt bei vielen Schriften */
    .schriftzug-side {
        display: flex;
        flex-direction: column;
    }

    .schriftzug-side > .schriftzug-tab-pane[data-sz-pane="font"]:not([hidden]) {
        flex: 1 1 auto;
        min-height: 0;
    }

    .schriftzug-tab-pane[data-sz-pane="font"] .schriftzug-font-field {
        flex: 1 1 auto;
        min-height: 0;
    }

    .schriftzug-tab-pane[data-sz-pane="font"] .schriftzug-fontlist {
        flex: 1 1 auto;
        min-height: 160px;
        max-height: none;
        align-content: start;
    }
}


/* ---------- 2.5.4: Badges, Anfasser, Maße, Holz-Tooltip ---------- */

.schriftzug-stage-badge,
.schriftzug-scalebox {
    display: none;
}

@media (min-width: 992px) {
    /* Preis unten rechts, Einzelteile unten links auf der Fläche */
    .schriftzug-stage-badge {
        position: absolute;
        bottom: var(--sz-space-4);
        z-index: 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 44px;
        padding: 4px 16px;
        border-radius: var(--sz-radius-pill);
        background: var(--sz-surface);
        pointer-events: none;
    }

    .schriftzug-stage-badge[hidden] {
        display: none;
    }

    .schriftzug-pieces-badge {
        left: var(--sz-space-4);
        color: var(--sz-ink);
        font: 600 14px/1.2 var(--sz-font-body);
    }

    .schriftzug-price-badge {
        right: var(--sz-space-4);
        align-items: flex-end;
        line-height: 1.1;
    }

    .schriftzug-price-badge strong {
        font: 600 24px/1.1 var(--sz-font-display);
        color: var(--sz-ink);
        white-space: nowrap;
    }

    .schriftzug-price-badge span {
        font-size: 11px;
        color: var(--sz-ink-muted);
    }

    /* Maße an den Linien größer */
    .schriftzug-modal .schriftzug-dimension {
        font-size: 17px;
    }

    .schriftzug-modal .schriftzug-dimension span {
        padding: 1px 8px;
    }

    /* Kacheln Breite/Höhe/Einzelteile entfallen – die Fläche zeigt alles */
    .schriftzug-modal .schriftzug-size-summary {
        display: none;
    }

    /* Holzart: Beschreibung und Infotext als Tooltip am Knopf */
    .schriftzug-modal [data-sz-wood-description],
    .schriftzug-modal [data-sz-wood-info] {
        display: none !important;
    }

    /* Tooltip über der ganzen Liste – bleibt immer innerhalb der Spalte */
    .schriftzug-modal .schriftzug-wood-list {
        position: relative;
    }

    .schriftzug-modal .schriftzug-wood-option[data-sz-tip]:hover::after,
    .schriftzug-modal .schriftzug-wood-option[data-sz-tip]:focus-visible::after {
        content: attr(data-sz-tip);
        position: absolute;
        left: 0;
        bottom: calc(100% + 6px);
        z-index: 10;
        width: max-content;
        max-width: 100%;
        padding: 8px 12px;
        border-radius: var(--sz-radius-md);
        background: var(--sz-ink);
        color: var(--sz-on-accent);
        font: 400 13px/1.4 var(--sz-font-body);
        white-space: pre-line;
        pointer-events: none;
    }
}

/* Anfasser zum Ziehen der Größe – nur mit Maus auf großem Monitor */
@media (min-width: 992px) and (pointer: fine) {
    .schriftzug-scalebox {
        position: absolute;
        z-index: 2;
        display: block;
        box-sizing: border-box;
        border: 1px dashed var(--sz-line-strong);
        pointer-events: none;
    }

    .schriftzug-scalebox[hidden],
    .schriftzug-preview-stage.is-zoomed .schriftzug-scalebox,
    .schriftzug-preview.is-outline .schriftzug-scalebox.is-off {
        display: none;
    }

    .schriftzug-handle {
        position: absolute;
        width: 14px;
        height: 14px;
        margin: -7px 0 0 -7px;
        box-sizing: border-box;
        border: 2px solid var(--sz-ink);
        border-radius: 3px;
        background: var(--sz-surface);
        pointer-events: auto;
        touch-action: none;
    }

    .schriftzug-handle.is-nw { left: 0; top: 0; cursor: nwse-resize; }
    .schriftzug-handle.is-ne { left: 100%; top: 0; cursor: nesw-resize; }
    .schriftzug-handle.is-sw { left: 0; top: 100%; cursor: nesw-resize; }
    .schriftzug-handle.is-se { left: 100%; top: 100%; cursor: nwse-resize; }

    .schriftzug-scalebox.is-dragging {
        border-color: var(--sz-accent);
    }

    .schriftzug-scalebox.is-dragging .schriftzug-handle {
        border-color: var(--sz-accent);
    }
}


/* ---------- 2.5.5 (großer Monitor) ---------- */

@media (min-width: 992px) {
    /* „Farbe“ und „Nur Kontur“ gleich breit */
    .schriftzug-view {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: auto repeat(2, minmax(0, 1fr));
        align-items: center;
    }

    .schriftzug-view-button {
        min-width: 112px;
    }

    /* Farbkreise größer, gleichmäßig über die ganze Breite */
    .schriftzug-modal .schriftzug-color-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
        gap: var(--sz-space-2);
        justify-items: center;
    }

    .schriftzug-modal .schriftzug-color-list .bb-swatch {
        width: 56px;
        height: 56px;
    }

    .schriftzug-stage-badge[hidden] {
        display: none !important;
    }
}


/* ---------- 2.5.6 (großer Monitor) ---------- */

@media (min-width: 992px) {
    /* Holzart: runde Enden, Knöpfe füllen die Zeile */
    .schriftzug-designer.schriftzug-modal .schriftzug-wood-list {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .schriftzug-modal .schriftzug-wood-option {
        border-radius: var(--sz-radius-pill);
        padding: 8px 20px;
    }

    /* Textfeld und cm-Feld mit runden Enden */
    .schriftzug-modal .schriftzug-text-input,
    .schriftzug-modal .schriftzug-size-input .bb-field {
        border-radius: var(--sz-radius-pill);
        padding-left: 20px;
    }

    /* Größe: cm-Feld rechts neben „Breite/Höhe festlegen“, Regler darunter über die ganze Breite */
    .schriftzug-modal .schriftzug-size-field {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: var(--sz-space-3);
        row-gap: var(--sz-space-2);
    }

    .schriftzug-modal .schriftzug-size-field > .bb-label,
    .schriftzug-modal .schriftzug-size-field > .schriftzug-message {
        grid-column: 1 / -1;
    }

    .schriftzug-modal .schriftzug-size-field .schriftzug-mode {
        grid-column: 1;
        grid-row: 2;
    }

    .schriftzug-modal .schriftzug-size-field .schriftzug-slider-row {
        display: contents;
    }

    .schriftzug-modal .schriftzug-size-field .schriftzug-size-input {
        grid-column: 2;
        grid-row: 2;
        width: 130px;
    }

    .schriftzug-modal .schriftzug-size-field .schriftzug-slider {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .schriftzug-modal .schriftzug-size-hint {
        display: none;
    }

    /* Farben: festes Raster mit 8 Kreisen je Zeile über die ganze Breite */
    .schriftzug-designer.schriftzug-modal .schriftzug-color-list {
        display: grid;
        grid-template-columns: repeat(8, minmax(0, 1fr));
        gap: var(--sz-space-3);
        justify-items: stretch;
    }

    .schriftzug-modal .schriftzug-color-list .bb-swatch {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
    }
}


/* ---------- 2.5.7 (großer Monitor): Schriftauswahl höher, Kacheln mit runden Enden ---------- */

@media (min-width: 992px) {
    .schriftzug-modal .schriftzug-fontgroup,
    .schriftzug-modal .schriftzug-tab {
        height: 44px;
        font-size: 14px;
    }

    .schriftzug-modal .schriftzug-fontgroups {
        margin-bottom: var(--sz-space-2);
    }

    .schriftzug-modal .schriftzug-fontlist {
        gap: var(--sz-space-2) var(--sz-space-1);
    }

    .schriftzug-modal .schriftzug-font {
        min-height: 64px;
        padding: var(--sz-space-1) var(--sz-space-4);
        border-radius: var(--sz-radius-pill);
    }

    .schriftzug-modal .schriftzug-font-sample {
        font-size: 21px;
        line-height: 1.3;
    }
}


/* ---------- 2.5.8 (großer Monitor) ---------- */

@media (min-width: 992px) {
    /* Größe: Buttons | Regler | cm-Feld in einer Zeile, vertikal mittig */
    .schriftzug-modal .schriftzug-size-field {
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
    }

    .schriftzug-modal .schriftzug-size-field .schriftzug-mode {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
    }

    .schriftzug-modal .schriftzug-size-field .schriftzug-slider {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        margin: 0;
    }

    .schriftzug-modal .schriftzug-size-field .schriftzug-size-input {
        grid-column: 3;
        grid-row: 2;
        align-self: center;
    }

    /* Holzart: Umbruch hinter „Mehrschichtholz“, Text mittig im Knopf */
    .schriftzug-modal .schriftzug-wood-option {
        white-space: pre-line;
        text-align: center;
        justify-content: center;
        line-height: 1.3;
    }

    /* Verbindungssteg: Hinweis als Tooltip am Knopf statt i-Symbol */
    .schriftzug-modal .schriftzug-bar-info {
        display: none !important;
    }

    .schriftzug-modal .schriftzug-bar-choices {
        position: relative;
    }

    .schriftzug-modal .schriftzug-bar-toggle[data-sz-tip]:hover::after,
    .schriftzug-modal .schriftzug-bar-toggle[data-sz-tip]:focus-visible::after {
        content: attr(data-sz-tip);
        position: absolute;
        left: 0;
        bottom: calc(100% + 6px);
        z-index: 10;
        width: max-content;
        max-width: 100%;
        padding: 8px 12px;
        border-radius: var(--sz-radius-md);
        background: var(--sz-ink);
        color: var(--sz-on-accent);
        font: 400 13px/1.4 var(--sz-font-body);
        box-sizing: border-box;
        white-space: pre-line;
        text-align: left;
        pointer-events: none;
    }
}

@media (min-width: 992px) {
    /* Keine hellen Kästen: Bedienfeld, Leiste unter der Fläche und Fußzeile liegen direkt auf dem Hintergrund */
    .schriftzug-modal .schriftzug-side,
    .schriftzug-modal .schriftzug-stagebar,
    .schriftzug-modal .schriftzug-footer {
        background: transparent;
        box-shadow: none;
        border: 0;
    }
}


/* ---------- 2.6.0: Laptop/Tablet quer (992–1599 px) – Design vom großen Monitor, nur wo der Platz fehlt angepasst ---------- */

@media (min-width: 992px) and (max-width: 1599.98px) {
    /* Hinweistext in der Leiste unter der Fläche hat keinen Platz */
    .schriftzug-modal .schriftzug-stagebar [data-sz-pieces-hint] {
        display: none;
    }

    .schriftzug-modal .schriftzug-view {
        grid-template-columns: auto repeat(2, minmax(0, auto));
    }

    /* Größe: Knöpfe und cm-Feld in einer Zeile, Regler darunter über die ganze Breite */
    .schriftzug-modal .schriftzug-size-field {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .schriftzug-modal .schriftzug-size-field .schriftzug-size-input {
        grid-column: 2;
        grid-row: 2;
    }

    .schriftzug-modal .schriftzug-size-field .schriftzug-slider {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    /* Holzart: Knöpfe breit genug für „4 mm Mehrschichtholz“ in einer Zeile */
    .schriftzug-designer.schriftzug-modal .schriftzug-wood-list {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .schriftzug-modal .schriftzug-size-field .schriftzug-mode {
        flex-wrap: nowrap;
    }

    .schriftzug-modal .schriftzug-size-field .schriftzug-mode .bb-choice {
        padding-left: 14px;
        padding-right: 14px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Leiste unter der Fläche: „Ansicht“ ausblenden, Knöpfe schmaler, Zoom-Regler kürzer */
    .schriftzug-modal .schriftzug-view-label {
        display: none;
    }

    .schriftzug-modal .schriftzug-view {
        grid-template-columns: repeat(2, minmax(0, auto));
    }

    .schriftzug-modal .schriftzug-view-button {
        min-width: 0;
        padding-left: 16px;
        padding-right: 16px;
    }

    .schriftzug-modal .schriftzug-zoom [data-sz-zoom-range] {
        width: 80px;
    }
}