/* Schriftzug-Konfigurator (fs-schriftzug.js) – Farben/Schriften aus dem fs_v9-Theme (Fallbacks für die Testseite) */

.fsz, .fsz-dialog, .fsz-raum-blatt {
    --fsz-akzent: var(--fs-color-primary, #b71818);
    --fsz-akzent-hover: var(--fs-color-primary-hover, #96130f);
    --fsz-text: var(--fs-color-text, #2F3E46);
    --fsz-grau: var(--fs-color-text-muted, #61727c);
    --fsz-linie: var(--fs-color-border-strong, #d1d5db);
    --fsz-linie-leicht: var(--fs-color-border, #E8EEF2);
    --fsz-fläche: var(--fs-color-surface-alt, #F8FAFB);
    --fsz-senke: var(--fs-color-surface-sunken, #f3f4f6);
    --fsz-tint: var(--fs-brand-frankenschaum-tint, #f5e7e7);
    --fsz-fokus: var(--fs-color-accent, #3b5998);
    --fsz-ok: #1f7a4d; --fsz-ok-bg: #e4f2ea;
    --fsz-warn: #8a5d0c; --fsz-warn-bg: #fbf0da;
    --fsz-fehler: #8f2a1e; --fsz-fehler-bg: #f7e7e3;
    --fsz-radius: 12px;
    /* Look des Zuschnitt-Konfigurators: Space Mono, Knopfrot #c8102e, dunkler Fortschrittsbalken */
    --fsz-mono: var(--fs-font-mono, 'Space Mono', 'Courier New', ui-monospace, monospace);
    --fsz-knopf: var(--brand-button, #c8102e);
    --fsz-knopf-hover: var(--brand-button-hover, #a00d24);
    --fsz-dunkel: var(--brand-dark, #1a1a1a);
    --fsz-preisfarbe: var(--brand-primary, #b81818);
    --fsz-tab-linie: #dae2ec;
    --fsz-tab-grau: #587390;
    font-family: var(--fs-font-headline, 'Varela Round', system-ui, sans-serif);
}
.fsz { font-family: var(--fsz-mono); }
.fsz {
    /* Spalten nach der Breite des Konfigurators, nicht des Fensters (im Shop steckt er ggf. in der schmalen Buy-Box-Spalte) */
    container: fsz / inline-size;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
    color: var(--fsz-text);
    font-size: 15px;
}
/* Basen im Verhältnis 1,55 : 1 → nebeneinander wie vorher das Raster 1.55fr / 1fr */
.fsz > .fsz-vorschau { flex: 1.55 1 558px; }
.fsz > .fsz-panel { flex: 1 1 360px; }

.fsz > * { min-width: 0; }   /* Wischleisten (Schriften) dürfen die Spalte nicht aufweiten */
/* Schmaler Container (< 960 px, z. B. Buy-Box-Spalte am Desktop): Vorschau oben, Bedienung darunter */
@container fsz (max-width: 959.98px) {
    .fsz:not(.fsz-extern) > .fsz-vorschau, .fsz:not(.fsz-extern) > .fsz-panel { flex-basis: 100%; }
    .fsz:not(.fsz-extern) > .fsz-vorschau { position: static; }
    /* (≤ 900 px Fensterbreite gelten die mobilen Höhen weiter unten) */
    @media (min-width: 901px) { .fsz:not(.fsz-extern) .fsz-canvas { max-height: 55vh; } }
}
/* auch im Raum-Bottom-Sheet (liegt im body, außerhalb von .fsz): sonst schlägt .fsz-raum { display: flex } das hidden */
.fsz [hidden], .fsz-dialog [hidden], .fsz-raum-blatt [hidden] { display: none !important; }
/* Reset nur für eigene Knöpfe, Shop-Buttons (.fs-btn) behalten ihre Theme-Schrift; Spezifität 0,1,0 → Komponenten-Regeln gewinnen */
.fsz :where(button:not(.fs-btn)), .fsz-dialog :where(button:not(.fs-btn)) { font: inherit; color: inherit; cursor: pointer; }
.fsz h3 { font: 700 0.78rem/1.3 var(--fs-font-mono, 'Space Mono', ui-monospace, monospace); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fsz-text); margin: 0 0 0.6rem; }
.fsz-klein, .fsz small, .fsz-hinweis { font-family: var(--fs-font-body, Merriweather, serif); }
.fsz-klein { font-size: 0.82rem; color: var(--fsz-grau); line-height: 1.5; }
.fsz-link { background: none; border: 0; padding: 0; color: var(--fsz-akzent); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
button.fsz-link { min-height: 44px; display: inline-flex; align-items: center; gap: 0.3rem; text-align: left; }

/* Fokus: immer sichtbar (auch im Shop), Tastatur */
.fsz :is(button, a, input, textarea, [tabindex]):focus-visible,
.fsz-dialog :is(button, a, input, textarea, [tabindex]):focus-visible { outline: 3px solid var(--fsz-fokus) !important; outline-offset: 2px; }

/* ---------- Vorschau ---------- */
.fsz-vorschau { position: sticky; top: var(--fsz-sticky-top, 1rem); display: flex; flex-direction: column; gap: 0.6rem; container: fszv / inline-size; }
.fsz-segmente { display: inline-flex; align-self: flex-start; max-width: 100%; background: var(--fsz-senke); border-radius: 999px; padding: 3px; box-sizing: border-box; }
.fsz-seg { border: 0; background: none; padding: 0.45rem 1rem; min-height: 44px; border-radius: 999px; font-weight: 600; font-size: 0.88rem; color: var(--fsz-grau); display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; white-space: nowrap; }
.fsz-kurz { display: none; }
@container fszv (max-width: 440px) {
    .fsz-seg .fsz-lang { display: none; }
    .fsz-seg .fsz-kurz { display: inline; }
    .fsz-seg { padding-inline: .7rem; }
}
.fsz-seg.is-aktiv { background: #fff; color: var(--fsz-text); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.fsz-bühne { position: relative; border-radius: var(--fsz-radius); overflow: hidden; background: #eef1f3; box-shadow: 0 10px 25px rgba(20,33,42,0.1); }
.fsz-bühne:not(.is-bereit)::after { content: 'Vorschau wird geladen …'; position: absolute; inset: 0; display: grid; place-items: center; color: #61727c; pointer-events: none; }
/* Bühne 1:1, höchstens so hoch, dass die klebende Vorschau (Umschalter + Bühne + Leiste, im Foto + Fotoleiste) ins
   Fenster passt – dann breiter als hoch. --fsz-leiste-unten: Leiste unter dem Bild (schmale Vorschau),
   --fsz-foto-rest: Fotoleiste unter der Bühne (Desktop) */
.fsz-canvas { display: block; width: 100%; aspect-ratio: 1 / 1; touch-action: pan-y;
    max-height: calc(100vh - var(--fsz-sticky-top, 1rem) - 5rem - var(--fsz-leiste-unten, 0px) - var(--fsz-foto-rest, 0px));
    max-height: calc(100dvh - var(--fsz-sticky-top, 1rem) - 5rem - var(--fsz-leiste-unten, 0px) - var(--fsz-foto-rest, 0px)); }
.fsz-vorschau:has(> .fsz-fotoleiste:not([hidden])) .fsz-canvas { --fsz-foto-rest: 3.6rem; }
.fsz-canvas.is-ziehen { cursor: grabbing !important; }
.fsz-bühne-knöpfe { position: absolute; right: 10px; top: 10px; display: flex; gap: 6px; }
.fsz-download, .fsz-werkzeug { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.92); color: var(--fsz-text); box-shadow: 0 1px 4px rgba(0,0,0,0.15); font-size: 1.1rem; display: grid; place-items: center; padding: 0; }
.fsz-download:hover, .fsz-werkzeug:hover { background: #fff; }
/* Status als Chip unten links in der Bühne */
.fsz-status { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); box-sizing: border-box; min-height: 0; padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.82rem; line-height: 1.35; background: rgba(255,255,255,0.95); color: var(--fsz-text); box-shadow: 0 1px 4px rgba(0,0,0,0.12); z-index: 2; }
.fsz-status:empty { display: none; }
.fsz-status.is-ok { background: var(--fsz-ok-bg); color: var(--fsz-ok); }
.fsz-status.is-warn { background: var(--fsz-warn-bg); color: var(--fsz-warn); }
.fsz-status.is-fehler { background: var(--fsz-fehler-bg); color: var(--fsz-fehler); }
.fsz-status i { vertical-align: -2px; }
/* Etikett oben links in der Bühne: Status kompakt (✓ 11 Teile · bei Problemen „⚠ 3 dünne Stellen · Beheben“) und
   daneben der Maß-Hinweis; der ganze Satz steht im Tooltip, beim Antippen und für Screenreader (aria-live) */
.fsz-etikett { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    max-width: calc(100% - 76px); pointer-events: none; }
.fsz-etikett > * { pointer-events: auto; }
.fsz-etikett .fsz-mass-hinweis { position: static; pointer-events: none; }
.fsz-bühne .fsz-etikett .fsz-status { position: static; max-width: 100%; display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap;
    padding: 4px 8px; border-radius: 4px; font: 700 11px/1.3 var(--fs-font-mono, 'Space Mono', ui-monospace, monospace);
    background: rgba(255,255,255,0.9); color: var(--fsz-text); box-shadow: none; cursor: default; }
.fsz-etikett .fsz-status i { font-size: 1rem; vertical-align: 0; }
.fsz-etikett .fsz-status.is-ok i { color: var(--fsz-ok); }
.fsz-etikett .fsz-status.is-warn { background: var(--fsz-warn-bg); color: var(--fsz-warn); box-shadow: inset 0 0 0 1px rgba(138,93,12,.35); }
.fsz-etikett .fsz-status.is-fehler { background: var(--fsz-fehler-bg); color: var(--fsz-fehler); box-shadow: inset 0 0 0 1px rgba(143,42,30,.35); }
.fsz-etikett .fsz-status:has(.fsz-status-lang) { cursor: pointer; }
.fsz-status .fsz-status-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fsz-status.is-offen .fsz-status-lang { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-weight: 400; }
.fsz-status.is-offen .fsz-status-kurz { display: none; }
.fsz .fsz-status-aktion { border: 0; background: none; padding: 0 0 0 .1rem; min-height: 24px; font: inherit; font-weight: 700; color: inherit;
    text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.fsz .fsz-status-aktion::before { content: '·'; display: inline-block; margin-right: .35rem; text-decoration: none; }
.fsz-fotoleiste { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; }
.fsz-fotoleiste label { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.88rem; }
.fsz-fotoleiste input[type=range] { width: 140px; height: 44px; accent-color: var(--fsz-akzent); }

/* ---------- Panel ---------- */
.fsz-panel { display: flex; flex-direction: column; gap: 1.25rem; }
.fsz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Schritt-Tabs (wie config-form__tabs im Zuschnitt-Konfigurator) ---------- */
.fsz-tabs { display: flex; align-items: flex-start; column-gap: 1rem; margin-top: 5px; container-type: inline-size; }
.fsz .fsz-tab { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: none; border: 0; border-top: 5px solid var(--fsz-tab-linie); border-radius: 0; padding: 4px 0 0; min-height: 64px; font-family: var(--fsz-mono); color: var(--fsz-text); letter-spacing: .025em; cursor: pointer; }
.fsz-tab::before { content: ''; position: absolute; top: -5px; left: 0; width: 0; height: 5px; background: var(--fsz-dunkel); transition: width .35s cubic-bezier(0, 0, .2, 1), background-color .2s; }
.fsz-tab[aria-selected=true]::before { width: 50%; }
.fsz-tab.is-erledigt::before { width: 100%; }
.fsz-tab.is-fehler::before { width: 100%; background: var(--fsz-akzent); }
.fsz-tab.is-hinweis::before { width: 100%; background: #c98a16; }
.fsz-tab-nr { font-size: .8rem; font-weight: 500; line-height: 1.4; text-transform: uppercase; color: var(--fsz-tab-grau); white-space: nowrap; transition: color .2s; }
.fsz-tab[aria-selected=true] .fsz-tab-nr, .fsz-tab.is-erledigt .fsz-tab-nr { color: #333; }
.fsz-tab-titel { max-width: 100%; font-size: 1.2rem; font-weight: 400; line-height: 1.4; color: var(--fsz-text);
    /* wie live: zwei Zeilen erlaubt („Text &“ / „Schrift“, „Ober-“ / „fläche“ über weichen Trennstrich), mehr nicht */
    white-space: normal; hyphens: manual; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.fsz-tab:hover .fsz-tab-titel { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.fsz-tab[aria-selected=true]:hover .fsz-tab-titel { text-decoration: none; }
.fsz-tab-marke { position: absolute; right: 0; top: 4px; font-size: 1rem; color: var(--fsz-akzent); }
.fsz-tab.is-hinweis .fsz-tab-marke { color: #a26a0a; }
.fsz-tab.is-fehler .fsz-tab-nr { color: var(--fsz-akzent); }
.fsz-tab .fsz-kurz { display: none; }
/* schmale Tab-Leisten (Container = .fsz-tabs): Schrift kleiner, dann Kurznamen, zuletzt nur die Nummer */
@container (max-width: 520px) { .fsz-tab-titel { font-size: 1rem; } .fsz-tab-nr { font-size: .72rem; } }
@container (max-width: 400px) { .fsz-tabs { column-gap: .6rem; } .fsz-tab-titel { font-size: .85rem; } .fsz-tab-nr { font-size: .65rem; letter-spacing: .04em; } }
@container (max-width: 360px) { .fsz-tab .fsz-lang { display: none; } .fsz-tab .fsz-kurz { display: inline; } }
@container (max-width: 300px) { .fsz-tab-nr-wort { display: none; } .fsz-tab-titel { font-size: .75rem; letter-spacing: 0; } }
.fsz-schritt { display: flex; flex-direction: column; gap: 1.25rem; }
.fsz-schritt:focus { outline: none; }
.fsz-schritt:focus-visible { outline: 3px solid var(--fsz-fokus); outline-offset: 6px; border-radius: 4px; }

/* ---------- Weiter / zurück (wie .konfig-btn) ---------- */
.fsz-nav { display: flex; align-items: center; gap: .75rem; }
.fsz .fsz-weiter, .fsz .fsz-nav-zurück { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 12px 24px; border-radius: 12px; font: 600 .85rem/1 var(--fsz-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; transition: background-color .2s, border-color .2s; }
.fsz .fsz-weiter { position: relative; margin-left: auto; border: 0; background: var(--fsz-knopf); color: #fff; }
/* nur waagrecht kappen (Notnagel), senkrecht nicht: sonst fehlen bei Zeilenhöhe 1 die Punkte auf Ä/Ö/Ü */
.fsz-weiter-text { min-width: 0; white-space: nowrap; overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; }
/* Messlatte für _weiterEinpassen(): gleiche Schrift/Versalien/Laufweite, unsichtbar, außerhalb des Flusses */
.fsz-weiter-mess { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
@media (hover: hover) { .fsz .fsz-weiter:hover { background: var(--fsz-knopf-hover); } }
.fsz .fsz-weiter i, .fsz .fsz-nav-zurück i { font-size: 1.1rem; }
.fsz .fsz-nav-zurück { border: 1px solid var(--fsz-linie); background: #fff; color: var(--fsz-text); }
@media (hover: hover) { .fsz .fsz-nav-zurück:hover { border-color: var(--fsz-text); } }
.fsz-nav-preis { display: none; }
.fsz-block { display: flex; flex-direction: column; gap: 0.55rem; }
.fsz-modus { display: flex; align-self: stretch; }
.fsz-modus-knopf { flex: 1 1 0; border: 0; background: none; min-height: 44px; border-radius: 999px; font-weight: 600; font-size: 0.92rem; color: var(--fsz-grau); display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }
.fsz-modus-knopf.is-aktiv { background: #fff; color: var(--fsz-text); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.fsz-text { font-family: var(--fs-font-headline, 'Varela Round', system-ui, sans-serif); box-sizing: border-box; width: 100%; resize: vertical; font-size: 1.2rem; font-weight: 600; padding: 0.7rem 0.85rem; border: 1px solid var(--fsz-linie); border-radius: 10px; background: #fff; color: var(--fsz-text); line-height: 1.3; overflow-x: auto; }
.fsz-text:focus { border-color: var(--fsz-akzent); }
.fsz-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; min-height: 96px; border: 1px dashed var(--fsz-linie); border-radius: 10px; background: var(--fsz-fläche); color: var(--fsz-text); font-weight: 600; padding: 1rem; text-align: center; }
.fsz-dropzone i { font-size: 1.6rem; color: var(--fsz-akzent); }
.fsz-dropzone:hover, .fsz-dropzone.is-drüber { border-color: var(--fsz-akzent); background: var(--fsz-tint); }
.fsz-infokarte { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; background: var(--fsz-fläche); border: 1px solid var(--fsz-linie-leicht); border-radius: 10px; padding: 0.75rem 0.85rem; font-size: 0.88rem; }
.fsz-infokarte b { font-size: 0.92rem; }
.fsz-mailknopf { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--fsz-text); text-decoration: none; }
.fsz-mailknopf:hover { border-color: var(--fsz-akzent); background: var(--fsz-tint); }
.fsz-logochip { display: inline-flex; flex-wrap: wrap; align-self: flex-start; align-items: center; gap: 0.2rem 0.4rem; background: var(--fsz-fläche); border: 1px solid var(--fsz-linie); border-radius: 22px; padding: 0 0.3rem 0 0.8rem; font-weight: 600; max-width: 100%; }
.fsz-x { border: 0; background: #E8EEF2; width: 44px; height: 44px; border-radius: 50%; line-height: 1; font-size: 1.1rem; flex: none; }
.fsz-hinweis { font-size: 0.85rem; background: var(--fsz-warn-bg); color: var(--fsz-warn); border-radius: 8px; padding: 0.5rem 0.7rem; line-height: 1.5; }
.fsz-autohinweis { display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: 0.85rem; background: var(--fsz-tint); color: #8f1312; border-radius: 8px; padding: 0.5rem 0.7rem 0.1rem; line-height: 1.45; }
.fsz-autohinweis .fsz-link { color: #8f1312; }

.fsz-schriften { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.45rem; }
.fsz-schrift { border: 1px solid var(--fsz-linie); background: #fff; border-radius: 10px; padding: 0.5rem 0.5rem 0.4rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; min-width: 0; min-height: 64px; }
.fsz-schrift-probe { font-size: 1.15rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fsz-schrift-name { font-size: 0.72rem; color: var(--fsz-grau); }

.fsz-größe { display: flex; align-items: center; gap: 0.9rem; }
.fsz-größe input[type=range] { flex: 1; height: 44px; accent-color: var(--fsz-akzent); }
.fsz-maße { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; font-size: 0.92rem; color: var(--fsz-grau); }
.fsz-maße label { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.fsz input.fsz-zahl, .fsz input.fsz-zahl-h { box-sizing: border-box; width: 5.2rem; min-height: 44px; font: 700 1.05rem var(--fs-font-headline, 'Varela Round', system-ui, sans-serif); color: var(--fsz-text); padding: 0.4rem 0.5rem; border: 1px solid var(--fsz-linie); border-radius: 8px; text-align: right; background: #fff; }
.fsz input.fsz-zahl:focus, .fsz input.fsz-zahl-h:focus { border-color: var(--fsz-akzent); }
.fsz-grenze { color: var(--fsz-warn); }
.fsz-höhe { font-size: 0.88rem; color: var(--fsz-grau); }

.fsz-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.fsz-karte { display: flex; align-items: center; gap: 0.65rem; text-align: left; border: 1px solid var(--fsz-linie); background: #fff; border-radius: 10px; padding: 0.6rem 0.7rem; min-height: 56px; }
.fsz-karte b { display: block; font-size: 0.9rem; line-height: 1.25; }
.fsz-karte small { color: var(--fsz-grau); font-size: 0.8rem; }
.fsz-muster { flex: none; width: 34px; height: 34px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(20,33,42,0.2); }

.fsz-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fsz-chip { border: 1px solid var(--fsz-linie); background: #fff; border-radius: 999px; padding: 0.4rem 0.9rem; min-height: 44px; font-weight: 600; font-size: 0.9rem; }

/* aktiv: 2px Akzent (1px Rand + 1px innen) + Tint, ohne äußeren Ring */
.fsz-schrift.is-aktiv, .fsz-karte.is-aktiv, .fsz-chip.is-aktiv { border-color: var(--fsz-akzent); background: var(--fsz-tint); box-shadow: inset 0 0 0 1px var(--fsz-akzent); }

.fsz-farben { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.fsz-farbe { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px rgba(20,33,42,0.45); padding: 0; display: grid; place-items: center; }
.fsz-farbe.is-aktiv { box-shadow: inset 0 0 0 1px rgba(20,33,42,0.45), 0 0 0 2px #fff, 0 0 0 4px var(--fsz-akzent); }
.fsz-farbe i { font-size: 1.05rem; }
.fsz-farbe.fsz-mehr { width: auto; height: auto; min-height: 40px; border-radius: 999px; box-shadow: none; border: 1px solid var(--fsz-linie); background: #fff; padding: 0.3rem 0.85rem; font-weight: 600; font-size: 0.85rem; color: var(--fsz-text); }
.fsz-farbname { font-size: 0.88rem; color: var(--fsz-grau); min-height: 1.3em; }
.fsz-musterlink { align-self: flex-start; }

.fsz-extras { gap: 0.7rem; }
.fsz-check, .fsz-info { display: flex; gap: 0.7rem; align-items: flex-start; background: #fff; border: 1px solid var(--fsz-linie-leicht); border-radius: 10px; padding: 0.7rem 0.8rem; }
.fsz-check { cursor: pointer; }
.fsz-check input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--fsz-akzent); flex: none; }
.fsz-check b, .fsz-info b { display: block; font-size: 0.92rem; }
.fsz-check small, .fsz-info small { display: block; color: var(--fsz-grau); font-size: 0.82rem; line-height: 1.45; }
.fsz-check small + small { margin-top: 0.25rem; color: var(--fsz-text); }
.fsz-info i { font-size: 1.3rem; color: var(--fsz-akzent); margin-top: 1px; }

/* ---------- Kasse (wie die Buy-Box im Zuschnitt-Konfigurator) ---------- */
.fsz-kasse { display: flex; flex-direction: column; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--fsz-linie-leicht); font-family: var(--fsz-mono); }
.fsz-fertigung { font-size: .9rem; line-height: 1.3; color: #427a43; }
.fsz-lieferzeit { font-size: .9rem; line-height: 1.3; color: #333; background: rgba(184, 24, 24, .2); border: 1px solid rgba(184, 24, 24, .2); border-radius: 4px; padding: 12px 16px; margin-bottom: .25rem; }
.fsz-lieferzeit b { font-weight: 700; }
.fsz-lieferzeit-info { color: #2F3E46; font-size: .8rem; }
.fsz-kasse-preis { min-width: 0; }
.fsz-preiszeile { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .6rem; }
.fsz-preis { font: 700 1.6rem/1.4 var(--fsz-mono); color: var(--fsz-preisfarbe); transition: opacity .2s; }
.fsz-preis.is-laedt { opacity: .45; }
.fsz-delta { font: 400 .85rem var(--fsz-mono); color: var(--fsz-text); opacity: 1; transition: opacity .4s; white-space: nowrap; }
.fsz-delta.is-minus { color: #1f7a4d; }
.fsz-delta.is-weg { opacity: 0; }
.fsz-kasse .fsz-ust { font: 400 .85rem/1.3 var(--fsz-mono); color: var(--fsz-grau); }
.fsz-ust a { color: var(--fsz-fokus); text-decoration: underline; }
.fsz .fsz-sl-knopf { align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0; border: 0; background: none; font: 400 .85rem var(--fsz-mono); color: var(--fsz-text); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.fsz-sl-pfeil { transition: transform .2s; }
.fsz-sl-knopf[aria-expanded=true] .fsz-sl-pfeil { transform: rotate(180deg); }
.fsz-kasse .fsz-stueckliste { border-top: 0; padding-top: 0; margin-top: -.25rem; }
/* Menge − 1 + (wie #quantity-grp) */
.fsz-menge { display: flex; width: 100%; }
.fsz .fsz-menge-knopf { flex: none; min-width: 53px; min-height: 47px; border: 1px solid #eee; background: #F8FAFB; color: var(--fsz-text); font-size: 1rem; display: grid; place-items: center; }
.fsz .fsz-menge-knopf:first-child { border-radius: 5px 0 0 5px; }
.fsz .fsz-menge-knopf:last-child { border-radius: 0 5px 5px 0; }
.fsz .fsz-menge-knopf:hover { background: #eef1f3; }
.fsz input.fsz-menge-feld { flex: 1 1 auto; padding: 0 .5rem; min-width: 0; min-height: 47px; box-sizing: border-box; border: 1px solid #bcccdc; border-radius: 3px; background: #fff; color: #102a42; text-align: center; font: 500 1.2rem var(--fs-font-headline, 'Varela Round', system-ui, sans-serif); letter-spacing: .06em; }
.fsz input.fsz-menge-feld:focus { border-color: var(--fsz-akzent); }
.fsz-kaufgrund { font: 400 .85rem/1.45 var(--fsz-mono); padding: .5rem .75rem; border-radius: .5rem; background: var(--fsz-fehler-bg); color: var(--fsz-fehler); }
.fsz-kaufgrund.is-hinweis { background: var(--fsz-warn-bg); color: var(--fsz-warn); }
.fsz-kaufgrund .fsz-link { color: inherit; min-height: 0; }
/* „In den Warenkorb“ wie .sn-addBasket: volle Breite, Space Mono, Versalien */
/* font-size/padding mit !important: das Theme erzwingt sie für .fs-btn/[class*="btn-"] ebenfalls mit !important */
.fsz .fsz-kaufen { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; white-space: nowrap; font: 700 .875rem/1.2 var(--fsz-mono); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--fsz-knopf); border: 1px solid var(--fsz-knopf); border-radius: 12px; padding: 12px 24px !important; min-height: 52px; margin-top: .25rem; box-shadow: none; transition: background-color .2s, border-color .2s; cursor: pointer; font-size: .875rem !important; }
.fsz .fsz-kaufen i { font-size: 1.15rem; }
@media (hover: hover) { .fsz .fsz-kaufen:hover { background: var(--fsz-knopf-hover); border-color: var(--fsz-knopf-hover); } }
.fsz .fsz-kaufen:focus-visible { box-shadow: 0 0 0 2px #fff; }
.fsz .fsz-kaufen[aria-disabled=true], .fsz .fsz-kaufen[aria-disabled=true]:hover { background: #d1d5db; border-color: #d1d5db; color: #4b5b64 !important; box-shadow: none; cursor: not-allowed; }
.fsz .fsz-kaufen:disabled { cursor: progress; }

/* Mehrfarbig */
.fsz-schalter { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; font-size: 0.92rem; cursor: pointer; min-height: 44px; }
.fsz-schalter input { width: 22px; height: 22px; accent-color: var(--fsz-akzent); flex: none; }
.fsz-mehrfarb-hinweis { font-size: 0.85rem; background: var(--fsz-tint); border-radius: 8px; padding: 0.55rem 0.7rem; color: #8f1312; font-family: var(--fs-font-body, Merriweather, serif); line-height: 1.5; }
.fsz-farbgruppen { display: flex; flex-direction: column; gap: 0.3rem; }
.fsz-farbgruppen-kopf { font-size: 0.8rem; color: var(--fsz-grau); }
.fsz-farbgruppen-kopf b { color: var(--fsz-text); font-weight: 600; }
.fsz-gruppe { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; border: 1px solid var(--fsz-linie); background: #fff; border-radius: 10px; padding: 0.3rem 0.7rem; text-align: left; font-size: 0.88rem; }
.fsz-gruppe.is-aktiv { border-color: var(--fsz-akzent); background: var(--fsz-tint); box-shadow: inset 0 0 0 1px var(--fsz-akzent); }
.fsz-gruppe .fsz-gruppe-name { flex: 1; font-weight: 600; }
.fsz-gruppe .fsz-gruppe-n { color: var(--fsz-grau); white-space: nowrap; }
.fsz-punkt { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(20,33,42,0.45); }
.fsz-gruppe-neu { border-style: dashed; color: var(--fsz-akzent); font-weight: 600; justify-content: center; }

/* Maße in der 3D-Vorschau */
.fsz-mass { position: absolute; transform: translate(-50%, -50%); background: rgba(255,255,255,0.88); color: #2F3E46; font: 700 12px/1 var(--fs-font-mono, 'Space Mono', ui-monospace, monospace); padding: 4px 7px; border-radius: 4px; pointer-events: none; white-space: nowrap; }
.fsz-mass-h { transform: translate(-100%, -50%); }
.fsz-canvas.is-malen { cursor: pointer; }
.fsz-logooptionen { display: flex; flex-direction: column; gap: 0.1rem; }
.fsz-logooptionen small { font-weight: 400; color: var(--fsz-grau); }
.fsz-logofarben { display: inline-flex; gap: 3px; margin-left: 0.2rem; }
.fsz-logofarben i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(20,33,42,0.3); }

/* Logo-Auswahl-Dialog (liegt außerhalb von .fsz im body) */
.fsz-dialog { position: fixed; inset: 0; z-index: 10000; background: rgba(20,33,42,0.55); display: grid; place-items: center; padding: 16px; color: #2F3E46; }
.fsz-auswahl { background: #fff; border-radius: 14px; width: min(1100px, 100%); max-height: calc(100dvh - 32px); box-sizing: border-box; display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1.1rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3); font-size: 15px; color: #2F3E46; }
.fsz-auswahl h3 { margin: 0; font-size: 1.1rem; }
.fsz-auswahl .fsz-klein { font-family: var(--fs-font-body, Merriweather, serif); font-size: 0.85rem; color: var(--fsz-grau); margin: 0; }
.fsz-auswahl-kopf { display: flex; justify-content: space-between; align-items: center; }
.fsz-auswahl .fsz-x { cursor: pointer; }
.fsz-auswahl-bühne { background: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 0 0 / 20px 20px; border: 1px solid #E8EEF2; border-radius: 10px; padding: 8px; min-height: 0; flex: 1; display: flex; }
.fsz-auswahl-svg { width: 100%; height: auto; max-height: 60dvh; touch-action: none; user-select: none; cursor: crosshair; }
.fsz-auswahl-fuß { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: space-between; }
.fsz-auswahl-fuß > span { color: #61727c; font-size: 0.88rem; }
.fsz-auswahl .fsz-chip { cursor: pointer; border: 1px solid var(--fsz-linie); background: #fff; border-radius: 999px; padding: 0.4rem 0.9rem; min-height: 44px; font-weight: 600; font-size: 0.9rem; }
.fsz-auswahl .fs-btn { width: auto; min-height: 48px; border: 0; border-radius: .5rem; padding: 0.8rem 1.4rem; font: 700 1rem var(--fs-font-headline, 'Varela Round', system-ui, sans-serif); background: var(--fsz-akzent); color: #fff; cursor: pointer; }
.fsz-auswahl .fs-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.fsz-auswahl-link { margin-left: 0.3rem; font-size: 0.85rem; }
.fsz-mass-h.fsz-mass-r { transform: translate(0, -50%); }
@media (max-width: 600px) {
    /* Bottom-Sheet: unten angedockt, oben 6 % frei (Seite bleibt erkennbar), Griff + Wischen (Blatt.js) */
    .fsz-dialog { padding: 0; }
    .fsz-dialog:has(> .fsz-auswahl) { place-items: end stretch; }
    .fsz-auswahl { width: 100%; height: 94vh; height: 94dvh; max-height: 94dvh; border-radius: 16px 16px 0 0; padding-bottom: calc(.8rem + env(safe-area-inset-bottom, 0px)); }
    .fsz-auswahl-svg { max-height: none; }
    .fsz-auswahl > .fsz-blatt-griff { display: block; position: relative; flex: none; height: 18px; margin: -.5rem 0 -.3rem; touch-action: none; cursor: grab; }
    .fsz-auswahl-kopf { touch-action: none; }
}

.fsz-canvas.is-schieben { cursor: grab; }
.fsz-mass-hinweis { position: absolute; left: 10px; top: 10px; font: 700 11px/1 var(--fs-font-mono, 'Space Mono', ui-monospace, monospace); color: #61727c; background: rgba(255,255,255,0.85); padding: 5px 8px; border-radius: 4px; pointer-events: none; }

/* ---------- Steuerleiste der Vorschau (Look wie #fs3dBar im Zuschnitt-Konfigurator) ----------
   Breit: Pill unten mittig in der Bühne, Status-Chip darüber. Ab 700 px Vorschau sind die Blickwinkel Kurznamen,
   alle anderen Knöpfe sind Symbole (Tooltip + aria-label). < 620 px Leiste unter dem Bild (nur Symbole, 44-px-Ziele,
   unter 360 px gleichmäßig schmaler, Blickwinkel hinter einem Knopf, Status bleibt im Bild). */
.fsz-vorschau { --fsz-sk: 36px; --fsz-sk-aktiv: var(--bad-b, #2563eb); --fsz-steuer-h: calc(var(--fsz-sk) + 10px); }
@media (pointer: coarse) { .fsz-vorschau { --fsz-sk: 44px; } }
.fsz-steuer {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3;
    display: flex; align-items: center; padding: 4px; box-sizing: border-box; max-width: calc(100% - 24px);
    background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid var(--fsz-linie-leicht); border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08);
    font-family: var(--fsz-mono); touch-action: manipulation;
}
.fsz-sk-gruppe { display: flex; align-items: center; gap: 2px; padding: 0 4px; }
.fsz-sk-gruppe + .fsz-sk-gruppe { border-left: 1px solid var(--fsz-linie-leicht); }
.fsz-sk-gruppe[hidden], .fsz-sk-gruppe:empty { display: none; }
.fsz-sk-liste { display: flex; align-items: center; gap: 2px; }
.fsz .fsz-sk {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    width: auto; height: var(--fsz-sk); min-width: var(--fsz-sk); padding: 0 .4rem; margin: 0; box-sizing: border-box;
    border: 0; border-radius: 8px; background: transparent; box-shadow: none; color: var(--fsz-text);
    font: 600 .8rem/1 var(--fsz-mono); letter-spacing: .01em; white-space: nowrap; cursor: pointer;
    transition: background-color .15s, color .15s, transform .1s;
}
.fsz .fsz-sk i { font-size: 1.1rem; line-height: 1; }
.fsz .fsz-sk[data-ansicht=links] i, .fsz .fsz-sk-menü.is-gespiegelt i { transform: scaleX(-1); }
@media (hover: hover) { .fsz .fsz-sk:hover { background: var(--fsz-senke); } }
.fsz .fsz-sk:active { transform: scale(.96); }
.fsz .fsz-sk:focus-visible { outline: 2px solid var(--fsz-sk-aktiv); outline-offset: 1px; }
.fsz .fsz-sk[aria-pressed=true] { background: var(--fsz-sk-aktiv); color: #fff; box-shadow: 0 2px 6px rgba(37,99,235,.35); }
@media (hover: hover) { .fsz .fsz-sk[aria-pressed=true]:hover { background: var(--fsz-sk-aktiv); filter: brightness(1.06); } }
.fsz .fsz-sk[aria-disabled=true] { opacity: .35; cursor: default; transform: none; }
@media (hover: hover) { .fsz .fsz-sk[aria-disabled=true]:hover { background: transparent; } }
.fsz .fsz-sk-menü, .fsz .fsz-sk .fsz-sk-kurz { display: none; }
/* Tooltips (Maus/Tastatur); Touch hat aria-label */
@media (hover: hover) and (pointer: fine) {
    .fsz .fsz-sk[data-tipp]:hover::after, .fsz .fsz-sk[data-tipp]:focus-visible::after {
        content: attr(data-tipp); position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%);
        padding: 5px 8px; border-radius: 6px; background: var(--fsz-dunkel); color: #fff;
        font: 400 .72rem/1.25 var(--fsz-mono); letter-spacing: 0; white-space: nowrap; pointer-events: none; z-index: 4;
    }
}
/* Fokus-Tooltip nicht zusätzlich zeigen, solange die Maus über einem anderen Knopf steht */
.fsz .fsz-steuer:hover .fsz-sk:focus-visible:not(:hover)::after { display: none; }
/* Status-Chip über die Pill heben (sonst liegen beide unten links übereinander) */
.fsz-bühne .fsz-status { bottom: calc(12px + var(--fsz-steuer-h) + 8px); }
/* Foto: Kamera frontal fest, Ziehen verschiebt den Schriftzug → nur Zoom, Maße, Zurücksetzen */
.fsz-steuer.is-foto [data-gruppe=ansicht], .fsz-steuer.is-foto [data-gruppe=drehen], .fsz-steuer.is-foto [data-gruppe=ziehen] { display: none; }
/* 2D-Vorschau (ohne WebGL): nur Maße */
.fsz-steuer.is-2d .fsz-sk-gruppe:not([data-gruppe=extra]), .fsz-steuer.is-2d [data-modus=zurücksetzen] { display: none; }
.fsz-steuer.is-2d .fsz-sk-gruppe[data-gruppe=extra] { border-left: 0; }
/* Blickwinkel als Kurznamen wie im Vorbild (Iso | Oben | Vorne | Seite), sobald die Vorschau Platz hat (Leiste dann
   ≈ 680 px; Testseite 836 px, Shop 742–942 px), darunter Symbole. Die Namen stehen fest
   an jedem Knopf, nicht nur am gedrückten: sonst würde die zentrierte Leiste bei jedem Umschalten breiter und die
   Knöpfe wanderten unter dem Mauszeiger weg. Übrige Gruppen bleiben Symbole. */
/* Symbol UND Kurzname nebeneinander (Symbol links), sobald die ausgefahrene Leiste mit Rand in die Bühne passt:
   gemessen inkl. Raum- und Ansicht-Knopf 805 px, Bühnenrand 2 × 12 px → ab 830 px Vorschau (Testseite 836 px);
   darunter nur Symbole (ausgefahren 590 px) */
@container fszv (min-width: 830px) {
    .fsz .fsz-sk[data-ansicht] { padding: 0 .4rem 0 .32rem; gap: .25rem; }
    .fsz .fsz-sk[data-ansicht] .fsz-sk-kurz { display: inline; }
}
/* Tooltips am Rand der Leiste nicht aus der Bühne schieben */
.fsz .fsz-steuer .fsz-sk-gruppe[data-gruppe=ansicht] .fsz-sk:first-child::after,
.fsz .fsz-steuer .fsz-sk-gruppe[data-gruppe=raum] .fsz-sk::after { left: 0; transform: none; }
.fsz .fsz-steuer .fsz-sk-gruppe[data-gruppe=extra] .fsz-sk:last-child::after { left: auto; right: 0; transform: none; }
.fsz .fsz-sk[aria-expanded=true]::after { display: none !important; }

/* ---------- Raum (Knopf + Menü): Räume als Vorschau-Kacheln, Wandfarben, Möbel ----------
   Desktop: Menü über der Leiste in der Bühne. Schmale Vorschau: Bottom-Sheet am unteren Fensterrand (liegt im body,
   .fsz-raum-blatt), Räume als wischbare Kachelreihe. Selektoren mit :is(.fsz, .fsz-raum-blatt) für beide Orte. */
/* nur in der Wand-Ansicht: Nah zeigt keine Möbel, Foto die eigene Wand */
.fsz-steuer.is-foto [data-gruppe=raum], .fsz-steuer.is-nah [data-gruppe=raum] { display: none; }
.fsz .fsz-sk-raum[aria-expanded=true] { background: var(--fsz-senke); }
.fsz .fsz-sk-ico { display: inline-flex; width: 1.25rem; height: 1.25rem; }
.fsz .fsz-sk-ico svg { width: 100%; height: 100%; }
.fsz .fsz-sk-raum.is-lädt .fsz-sk-ico, :is(.fsz, .fsz-raum-blatt) .fsz-raum-kachel[aria-busy=true] .fsz-raum-bild { animation: fsz-puls 1s ease-in-out infinite; }
@keyframes fsz-puls { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .fsz .fsz-sk-raum.is-lädt .fsz-sk-ico, :is(.fsz, .fsz-raum-blatt) .fsz-raum-kachel[aria-busy=true] .fsz-raum-bild { animation: none; opacity: .7; } }
.fsz-raum {
    position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5; box-sizing: border-box; width: 372px; max-width: 100%;
    display: flex; flex-direction: column; gap: .45rem; padding: .6rem .75rem .75rem; overflow-y: auto; overscroll-behavior: contain;
    background: #fff; border: 1px solid var(--fsz-linie-leicht); border-radius: 14px;
    box-shadow: 0 14px 34px rgba(20,33,42,.18), 0 1px 3px rgba(0,0,0,.08);
    font-family: var(--fsz-mono); color: var(--fsz-text); text-align: left; cursor: default;
    --fsz-sk-aktiv: var(--bad-b, #2563eb);
}
:is(.fsz, .fsz-raum-blatt) .fsz-raum :where(button) { font: inherit; color: inherit; cursor: pointer; margin: 0; }
.fsz-raum > * { flex-shrink: 0; }   /* im begrenzten Menü scrollt das Menü, die Reihen schrumpfen nicht */
.fsz-raum-titel { font: 700 .66rem/1.3 var(--fsz-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fsz-grau); margin-top: .35rem; }
.fsz-raum-kopf { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .35rem; }
.fsz-raum-kopf .fsz-raum-titel { margin-top: 0; }
.fsz-raum-oben { margin-top: 0; }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-zu { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--fsz-senke); display: grid; place-items: center; padding: 0; font-size: 1rem; }
@media (hover: hover) { :is(.fsz, .fsz-raum-blatt) .fsz-raum-zu:hover { background: var(--fsz-linie-leicht); } }
/* Räume: Kacheln 16 : 10 mit Namen, gewählt = Rahmen + Haken */
.fsz-raum-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-kachel {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 0; border: 0; background: none; min-width: 0;
    font: 600 .7rem/1.2 var(--fsz-mono); color: var(--fsz-text); text-align: left;
}
.fsz-raum-bild { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: var(--fsz-senke);
    box-shadow: inset 0 0 0 1px rgba(20,33,42,.12); transition: box-shadow .15s; }
.fsz-raum-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fsz-raum-bild > i { display: grid; place-items: center; height: 100%; font-size: 1.6rem; color: var(--fsz-grau); }
.fsz-raum-name { padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsz-raum-haken { position: absolute; right: 5px; top: 5px; width: 20px; height: 20px; color: var(--fsz-sk-aktiv); opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.fsz-raum-haken svg { width: 100%; height: 100%; display: block; }
@media (hover: hover) { :is(.fsz, .fsz-raum-blatt) .fsz-raum-kachel:hover .fsz-raum-bild { box-shadow: inset 0 0 0 2px var(--fsz-linie); } }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-kachel[aria-pressed=true] .fsz-raum-bild { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fsz-sk-aktiv); }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-kachel[aria-pressed=true] .fsz-raum-haken { opacity: 1; transform: none; }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-kachel[aria-pressed=true] .fsz-raum-name { color: #1d4ed8; }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-kachel:focus-visible { outline: none; }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-kachel:focus-visible .fsz-raum-bild { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--fsz-fokus); }
/* Wandfarben: runde Felder mit feinem Rand, Name als Tooltip */
.fsz-raum-farben { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-farbe { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 0; padding: 0;
    box-shadow: inset 0 0 0 1px rgba(20,33,42,.28), inset 0 -3px 6px rgba(0,0,0,.08); }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-farbe[aria-pressed=true] { box-shadow: inset 0 0 0 1px rgba(20,33,42,.28), 0 0 0 2px #fff, 0 0 0 4px var(--fsz-sk-aktiv); }
@media (hover: hover) and (pointer: fine) {
    :is(.fsz, .fsz-raum-blatt) .fsz-raum-farbe:hover::after, :is(.fsz, .fsz-raum-blatt) .fsz-raum-farbe:focus-visible::after {
        content: attr(data-name); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
        padding: 4px 7px; border-radius: 6px; background: var(--fsz-dunkel); color: #fff; font: 400 .7rem/1.2 var(--fsz-mono);
        white-space: nowrap; pointer-events: none; z-index: 2;
    }
}
:is(.fsz, .fsz-raum-blatt) .fsz-raum-alle { border: 0; background: none; padding: 0 .2rem; min-height: 32px; font: 600 .74rem var(--fsz-mono); color: var(--fsz-fokus); text-decoration: underline; text-underline-offset: 2px; }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-alle[aria-disabled=true] { color: var(--fsz-grau); opacity: .55; text-decoration: none; cursor: default; }
/* Möbel: Liste mit Schaltern, zweispaltig */
.fsz-raum-möbel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px; }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-schalter {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 36px; padding: 0 .1rem; border: 0; border-bottom: 1px solid var(--fsz-linie-leicht);
    border-radius: 0; background: none; font: 600 .74rem/1.2 var(--fsz-mono); color: var(--fsz-text); text-align: left; min-width: 0;
}
.fsz-raum-möbelname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsz-raum-knebel { position: relative; flex: none; width: 30px; height: 18px; border-radius: 999px; background: #c7ced6; transition: background-color .15s; }
.fsz-raum-knebel::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-schalter[aria-checked=true] .fsz-raum-knebel { background: var(--fsz-sk-aktiv); }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-schalter[aria-checked=true] .fsz-raum-knebel::after { transform: translateX(12px); }
:is(.fsz, .fsz-raum-blatt) .fsz-raum-schalter[aria-checked=false] { color: var(--fsz-grau); }
.fsz--auto-motiv .fsz-rechte { display: none; }   /* Raum-Standard-Motiv ist kein Kunden-Upload */
.fsz-raum-tipp { margin: .15rem 0 0; font: 400 .72rem/1.45 var(--fs-font-body, Merriweather, serif); color: var(--fsz-grau); }
:is(.fsz, .fsz-raum-blatt) .fsz-raum :focus-visible { outline: 3px solid var(--fsz-fokus); outline-offset: 2px; }
@media (pointer: coarse) {
    :is(.fsz, .fsz-raum-blatt) .fsz-raum-farbe { width: 40px; height: 40px; }
    :is(.fsz, .fsz-raum-blatt) .fsz-raum-schalter, :is(.fsz, .fsz-raum-blatt) .fsz-raum-alle { min-height: 44px; }
    :is(.fsz, .fsz-raum-blatt) .fsz-raum-zu { width: 44px; height: 44px; }
}
/* Bottom-Sheet (schmale Vorschau): am unteren Fensterrand, höchstens halbe Höhe – die klebende Bühne oben bleibt frei */
.fsz-raum-blatt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10050; pointer-events: none; }
.fsz-raum-blatt .fsz-raum.is-blatt {
    position: relative; left: auto; bottom: auto; width: 100%; max-width: none; max-height: min(50vh, 460px); max-height: min(50dvh, 460px);
    pointer-events: auto; border: 0; border-radius: 16px 16px 0 0; padding: .35rem 16px calc(.9rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 30px rgba(20,33,42,.22); animation: fsz-blatt .22s ease-out;
}
/* Griff der Bottom-Sheets (Blatt.js): Balken oben mittig, am Griff und an der Kopfzeile nach unten wischen schließt */
.fsz-blatt-griff { display: none; }
:is(.fsz-raum.is-blatt, .fsz-vs-sheet .fsz-vs-panel) > .fsz-blatt-griff { display: block; position: relative; flex: none; align-self: stretch; height: 18px; margin: -.35rem 0 -.2rem; touch-action: none; cursor: grab; }
.fsz-blatt-griff::before { content: ''; position: absolute; left: 50%; top: 7px; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #cfd6dd; }
.fsz-raum.is-blatt .fsz-raum-oben, .fsz-vs-sheet .fsz-vs-kopf { touch-action: none; }
@keyframes fsz-blatt { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fsz-raum-blatt .fsz-raum.is-blatt { animation: none; } }
/* Räume im Sheet: eine wischbare Reihe */
.fsz-raum.is-blatt .fsz-raum-kacheln { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 6px; scrollbar-width: none; }
.fsz-raum.is-blatt .fsz-raum-kacheln::-webkit-scrollbar { display: none; }
.fsz-raum.is-blatt .fsz-raum-kachel { flex: 0 0 132px; scroll-snap-align: start; }
.fsz-raum.is-blatt .fsz-raum-farben { justify-content: space-between; }
/* einmaliger Hinweis „Möbel anklicken zum Ausblenden“ (unten mittig über der Leiste, verschwindet von selbst) */
.fsz-möbel-hinweis {
    position: absolute; left: 50%; bottom: calc(12px + var(--fsz-steuer-h) + 10px); z-index: 2; transform: translate(-50%, 6px); box-sizing: border-box; max-width: calc(100% - 24px);
    display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: 999px;
    background: rgba(20,33,42,.84); color: #fff; font: 600 .78rem/1.3 var(--fsz-mono); white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity .3s, transform .3s;
}
.fsz-möbel-hinweis.is-an { opacity: 1; transform: translate(-50%, 0); }
/* Mausrad ohne Strg/⌘: Seite scrollt weiter, kurz dieser Hinweis über der Bühne */
.fsz-rad-hinweis {
    position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; pointer-events: none;
    background: rgba(20,33,42,.45); opacity: 0; transition: opacity .25s;
}
.fsz-rad-hinweis.is-an { opacity: 1; }
.fsz-rad-hinweis span { color: #fff; font: 700 1.05rem/1.35 var(--fsz-mono); padding: .5rem 1rem; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.35); }
/* ---------- eingeklappt (Standard) / ausgefahren („Ansicht“) ----------
   Eingeklappt: Raum, Maße, Ansicht und – nur wenn etwas verändert ist – Zurücksetzen. Ausgefahren: alle Kamera-Knöpfe.
   Drehen ist der Normalfall: nur „Verschieben“ als Umschalter (Desktop wie mobil). */
.fsz-steuer:not(.is-offen) :is([data-gruppe=ansicht], [data-gruppe=drehen], [data-gruppe=zoom], [data-gruppe=ziehen]) { display: none; }
.fsz-steuer:not(.is-offen) .fsz-sk[data-modus=zurücksetzen][aria-disabled=true] { display: none; }
.fsz .fsz-sk[data-modus=drehen] { display: none; }
.fsz .fsz-sk-schalter { gap: .3rem; padding: 0 .55rem 0 .5rem; }
.fsz .fsz-sk-schalter .fsz-sk-pfeil { font-size: .75rem; transition: transform .2s; }
.fsz-steuer.is-offen .fsz-sk-schalter .fsz-sk-pfeil { transform: rotate(180deg); }
.fsz-steuer.is-offen .fsz-sk-schalter :is(.fsz-sk-text, i:first-child) { display: none; }   /* ausgefahren: nur der Pfeil zum Einklappen */
.fsz .fsz-sk-schalter[aria-expanded=true] { background: var(--fsz-senke); }
.fsz-steuer.is-offen :is([data-gruppe=ansicht], [data-gruppe=drehen], [data-gruppe=zoom], [data-gruppe=ziehen]) { animation: fsz-leiste-ein .22s ease-out; }
@keyframes fsz-leiste-ein { from { opacity: 0; transform: translateY(4px); } }
.fsz .fsz-sk-schalter.is-hinweis { animation: fsz-hinweis 1.6s ease-in-out; }
@keyframes fsz-hinweis { 25%, 75% { background: #eef3fe; box-shadow: 0 0 0 3px rgba(37,99,235,.35); } }
@media (prefers-reduced-motion: reduce) {
    .fsz-steuer.is-offen .fsz-sk-gruppe, .fsz .fsz-sk-schalter.is-hinweis, .fsz .fsz-sk-schalter .fsz-sk-pfeil { animation: none; transition: none; }
    .fsz .fsz-sk-schalter.is-hinweis { background: #eef3fe; }
}
.fsz .fsz-steuer .fsz-sk-gruppe[data-gruppe=schalter] .fsz-sk::after { left: auto; right: 0; transform: none; }

/* schmal: eingeklappt kleine Pill im Bild (44 px, spart Höhe), ausgefahren Leiste unter dem Bild, nur Symbole, 44 px */
@container fszv (max-width: 619.98px) {
    .fsz-vorschau .fsz-bühne { --fsz-sk: 44px; }
    .fsz-steuer:not(.is-offen) { bottom: 8px; padding: 2px 4px; }
    .fsz-steuer:not(.is-offen) .fsz-sk-gruppe { padding: 0 2px; }
    .fsz-steuer.is-offen :is([data-gruppe=raum], .fsz-sk[data-steuer=masse]) { display: none; }   /* ausgefahren: 8 Kamera-Knöpfe */
    .fsz-steuer.is-offen {
        position: relative; left: auto; bottom: auto; transform: none; max-width: none; width: 100%;
        justify-content: space-between; padding: 0 2px; border: 0; border-top: 1px solid var(--fsz-linie-leicht); border-radius: 0;
        background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
        touch-action: pan-y;     /* Wischen über der Leiste scrollt die Seite */
    }
    /* 44 px je Knopf; reicht die Breite nicht (8 × 44 = 352 px, z. B. 320-px-Geräte), schrumpfen Gruppen und Knöpfe
       gleichmäßig (Gruppen anteilig zu ihrer Knopfzahl) statt dass die Bühne den letzten Knopf abschneidet */
    .fsz-steuer.is-offen .fsz-sk-gruppe { gap: 0; padding: 0; flex: 0 1 auto; min-width: 0; }
    .fsz-steuer.is-offen .fsz-sk-gruppe + .fsz-sk-gruppe { border-left: 0; }
    .fsz .fsz-sk { flex: 0 1 44px; width: 44px; min-width: 0; padding: 0; }
    .fsz .fsz-steuer:not(.is-offen) .fsz-sk-schalter { flex: none; width: auto; padding: 0 .7rem 0 .6rem; }
    .fsz .fsz-sk-menü { display: inline-flex; }
    .fsz .fsz-sk-menü[aria-expanded=true] { background: var(--fsz-senke); }
    /* Drehen ist der Normalfall: nur „Verschieben“ als Umschalter */
    .fsz .fsz-sk[data-modus=drehen] { display: none; }
    /* Blickwinkel: Auswahl klappt über der Leiste auf (liegt kurz über dem Bild) */
    .fsz-sk-liste { display: none; }
    .fsz-sk-liste.is-offen {
        display: flex; position: absolute; left: 0; right: 0; bottom: 100%; z-index: 4; gap: 0; padding: 4px;
        background: #fff; border-top: 1px solid var(--fsz-linie-leicht); box-shadow: 0 -6px 14px rgba(20,33,42,.12);
    }
    .fsz-sk-liste.is-offen .fsz-sk { flex: 1 1 0; width: auto; height: 52px; flex-direction: column; gap: 3px; font-size: .66rem; }
    .fsz-sk-liste.is-offen .fsz-sk .fsz-sk-kurz { display: block; }
    /* gedrückt: sichtbare Fläche 36 px, Ziel bleibt 44 px */
    .fsz .fsz-steuer .fsz-sk[aria-pressed=true] { padding: 4px; background-clip: content-box; box-shadow: none; border-radius: 12px; }
    /* Foto: nur Zoom, Maße, Zurücksetzen → zusammen in die Mitte statt über die ganze Breite verteilt */
    .fsz-steuer.is-offen.is-foto, .fsz-steuer.is-offen.is-2d { justify-content: center; gap: 1.5rem; }
    /* ausgefahren steht die Leiste unter dem Bild → Bühne um sie kürzer; eingeklappt liegt die Pill im Bild */
    .fsz-bühne:has(> .fsz-steuer.is-offen) .fsz-canvas { --fsz-leiste-unten: 45px; }
    .fsz-bühne:has(> .fsz-steuer.is-offen) .fsz-möbel-hinweis { bottom: calc(45px + 10px); }
    .fsz-möbel-hinweis { bottom: calc(8px + 48px + 10px); }
}
/* Tipp-Modus (Tastatur offen): flache Nahansicht ohne Leiste */
html.fsz-tippen .fsz-steuer { display: none; }
html.fsz-tippen .fsz-bühne .fsz-status { bottom: 8px; }

/* ---------- Shop-Artikelseite: Vorschau in der Galerie-Spalte (fs-schriftzug.js _galerieEinbetten) ----------
   #product-offer > .product-gallery.fsz-galerie nimmt die Vorschau auf (.fsz-extern), die Produktbilder sind aus.
   Desktop: Spalte klebt unter dem Header (--fsz-kopf, misst die App), ab 1200 px 54 % breit, Bühne 1:1 bis Fensterhöhe.
   < 992 px: Spalte über den Schritten, randlos (--fsz-rand), klebt unter dem Header, höchstens halbe Fensterhöhe. */
.fsz-extern { display: block; --fsz-sticky-top: calc(var(--fsz-kopf, 64px) + 16px); }
.fsz-extern .fsz-vorschau { position: relative; top: auto; }
#product-offer > .product-gallery.fsz-galerie > :not(.fsz-extern) { display: none !important; }
@media (min-width: 992px) {
    #product-offer:has(> .fsz-galerie) { align-items: flex-start; }
    #product-offer > .product-gallery.fsz-galerie { position: sticky; top: calc(var(--fsz-kopf, 64px) + 16px); align-self: flex-start; z-index: 5; }
}
@media (min-width: 1200px) {
    #product-offer > .product-gallery.fsz-galerie { flex: 0 0 54%; max-width: 54%; }
    #product-offer > .fsz-galerie ~ .product-info { flex: 0 0 46%; max-width: 46%; }
}
@media (max-width: 991.98px) {
    #product-offer > .product-gallery.fsz-galerie, #product-offer > .fsz-galerie ~ .product-info { flex: 0 0 100%; max-width: 100%; }
    #product-offer > .product-gallery.fsz-galerie {
        position: sticky; top: var(--fsz-kopf, 56px); z-index: 30; background: #F8FAFB;
        margin-inline: calc(-1 * var(--fsz-rand, 8px)); flex-basis: calc(100% + 2 * var(--fsz-rand, 8px)); max-width: none; padding-inline: 0;
        box-shadow: 0 8px 10px -8px rgba(20,33,42,.22);
    }
    .fsz-extern .fsz-vorschau { margin-inline: 0; box-shadow: none; background: transparent; padding: .25rem 0 .5rem; gap: .4rem; }
    .fsz-extern .fsz-bühne { border-radius: 0; box-shadow: none; }
    .fsz-extern .fsz-fotoleiste { margin-inline: 12px; }
    /* Header + klebende Spalte (Umschalter und Abstände 88 px, Bühne, Leiste) zusammen höchstens 55 % der Fensterhöhe
       (390 × 844: Bühne 320 px statt 219 px, darunter bleibt Platz zum Bedienen) */
    .fsz-extern .fsz-canvas {
        max-height: calc(55vh - var(--fsz-kopf, 56px) - 88px - var(--fsz-leiste-unten, 0px));
        max-height: calc(55dvh - var(--fsz-kopf, 56px) - 88px - var(--fsz-leiste-unten, 0px)); }
    html.fsz-eingebettet { scroll-padding-top: calc(var(--fsz-kopf, 56px) + var(--fsz-galerie-h, 0px) + 12px); }
}
/* niedrige Handys (320 × 640): halbe Höhe inkl. Header, Bühne aber nicht flacher als 160 px (wie bisher 2 : 1) */
@media (max-width: 991.98px) and (max-height: 700px) {
    .fsz-extern .fsz-canvas { max-height: max(160px, calc(50dvh - var(--fsz-kopf, 56px) - 88px - var(--fsz-leiste-unten, 0px))); }
}
@media (max-height: 560px) {
    #product-offer > .product-gallery.fsz-galerie { position: static !important; }
    .fsz-extern .fsz-canvas { max-height: calc(100dvh - 7rem); }
}

/* Stückliste (eine Position je Farbe) */
.fsz-stueckliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; border-top: 1px solid var(--fsz-linie-leicht); padding-top: 0.7rem; }
.fsz-stueckliste li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem; }
.fsz-stueckliste b { display: block; font-weight: 600; }
.fsz-stueckliste small { color: var(--fsz-grau); font-size: 0.78rem; }
.fsz-stueckliste span:nth-child(2) { flex: 1; }
.fsz-sl-farbe { width: 18px; height: 18px; border-radius: 50%; flex: none; background: repeating-linear-gradient(45deg, #d1d5db 0 3px, #fff 3px 6px); box-shadow: inset 0 0 0 1px rgba(20,33,42,0.3); }
.fsz-sl-preis { font-weight: 700; white-space: nowrap; }

/* Windows-Kontrastmodus: Farbflächen bleiben Farben, Auswahl bleibt erkennbar */
.fsz-farbe, .fsz-muster, .fsz-sl-farbe, .fsz-logofarben i, .fsz-punkt { forced-color-adjust: none; }
@media (forced-colors: active) {
    .fsz .is-aktiv { outline: 3px solid Highlight; outline-offset: 1px; }
}

/* Während des Kaufs (Positionen werden gespeichert/gelegt) keine Änderungen mehr zulassen */
.fsz.is-kauf .fsz-panel > :not(.fsz-kasse), .fsz.is-kauf .fsz-vorschau { pointer-events: none; opacity: .6; }

/* Fokussierte Elemente nicht hinter Vorschau/Kasse (Werte setzt fs-schriftzug.js) */
html { scroll-padding-top: calc(var(--fsz-oben, 0px) + 12px); scroll-padding-bottom: calc(var(--fsz-unten, 0px) + 12px); }

/* fs_v9-Theme erzwingt bis 991 px für Eingaben Schriftgröße/Innenabstand/Radius/Mindesthöhe mit !important → gleichziehen */
@media (max-width: 991px) {
    .fsz input.fsz-zahl, .fsz input.fsz-zahl-h { padding: .4rem .5rem !important; border-radius: 8px !important; min-height: 44px !important; font-size: 1.05rem !important; }
    .fsz input.fsz-menge-feld { padding: 0 .5rem !important; border-radius: 3px !important; min-height: 47px !important; font-size: 1.2rem !important; }
    .fsz textarea.fsz-text { padding: .7rem .85rem !important; border-radius: 10px !important; font-size: 1.2rem !important; }
}

/* ---------- Mobil ---------- */
@media (max-width: 900px) {
    .fsz { gap: 1rem; }
    .fsz > .fsz-vorschau, .fsz > .fsz-panel { flex-basis: 100%; }
    /* Vorschau randlos, klebt oben (Einbettung setzt --fsz-sticky-top auf die Header-Unterkante) */
    .fsz-vorschau { position: sticky; top: var(--fsz-sticky-top, 0px); z-index: 5; gap: 0; margin-inline: calc(-1 * var(--fsz-rand, 16px)); background: var(--fsz-fläche); box-shadow: 0 6px 12px -8px rgba(20,33,42,.25); }
    .fsz-vorschau .fsz-segmente { display: flex; align-self: stretch; margin: 6px var(--fsz-rand, 16px); }
    .fsz-seg { flex: 1 1 0; padding: 0.4rem 0.5rem; font-size: 0.85rem; white-space: nowrap; }
    .fsz-lang { display: none; }
    .fsz-kurz { display: inline; }
    .fsz-bühne { border-radius: 0; box-shadow: none; }
    /* klebende Vorschau (Umschalter 56 px + Bühne + Leiste) höchstens halb so hoch wie das Fenster (390 × 844: 422 px),
       darunter bleibt Platz zum Bedienen; bei breiten Geräten gedeckelt → breiter als hoch.
       --fsz-vorschau-rest: Höhe der Vorschau ohne Bühne (Einbettung im Shop: eigener Wert) */
    .fsz-canvas { aspect-ratio: 1 / 1;
        max-height: calc(50vh - var(--fsz-vorschau-rest, 56px) - var(--fsz-leiste-unten, 0px));
        max-height: calc(50dvh - var(--fsz-vorschau-rest, 56px) - var(--fsz-leiste-unten, 0px)); }
    .fsz-status { font-size: 0.78rem; padding: 0.3rem 0.6rem; }
    .fsz-karten { grid-template-columns: 1fr; }
    /* Schriften als Wischleiste: nächste Kachel angeschnitten */
    .fsz-schriften { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .5rem; padding-bottom: 4px; }
    .fsz-schrift { flex: 0 0 132px; min-height: 64px; scroll-snap-align: start; }
    .fsz-schrift-probe { font-size: 1rem; }
    /* Schritt-Tabs kompakt wie im Zuschnitt-Konfigurator mobil: Balken oben, Kurzname, 4 in einer Reihe */
    .fsz-tabs { column-gap: .4rem; margin-top: 0; }
    .fsz .fsz-tab { flex: 1 1 0; align-items: center; text-align: center; border-top: 0; padding: 0 0 .15rem; min-height: 44px; }
    .fsz-tab::before { position: static; order: -1; flex: none; width: 100%; height: 3px; border-radius: 2px; background: var(--fsz-tab-linie); margin-bottom: .3rem; }
    .fsz-tab[aria-selected=true]::before, .fsz-tab.is-erledigt::before { width: 100%; background: var(--fsz-akzent); }
    .fsz-tab.is-fehler::before { background: var(--fsz-akzent); }
    .fsz-tab-nr { font-size: .625rem; letter-spacing: .08em; }
    .fsz-tab-titel { display: block; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fsz-tab .fsz-kurz { display: inline; }
    .fsz-tab[aria-selected=true] .fsz-tab-nr, .fsz-tab[aria-selected=true] .fsz-tab-titel { color: var(--fsz-akzent); font-weight: 700; }
    .fsz-tab-marke { top: 5px; right: -2px; font-size: .85rem; }
    /* Weiter-Leiste klebt unten (Daumen), mit Preis – nur wenn die App ihre Kasse selbst zeigt (sonst Shop-Kaufleiste) */
    .fsz .fsz-weiter, .fsz .fsz-nav-zurück { min-height: 52px; }
    .fsz .fsz-weiter { flex: 1 1 auto; min-width: 0; padding: 12px 16px; font-size: .8rem; letter-spacing: .06em; }
    .fsz .fsz-nav-zurück { flex: none; width: 52px; padding: 0; }
    /* Hintergrund randlos über border-image-outset (erzeugt keinen horizontalen Scroll, egal wie breit der Seitenrand ist) */
    .fsz:not(.fsz--kasse-extern):not(.fsz--letzter-schritt) .fsz-nav { position: sticky; bottom: 0; z-index: 6; padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom, 0px)); border-image: linear-gradient(var(--fsz-linie) 0 1px, #fff 1px) fill 0 // 0 100vmax; }
    .fsz:not(.fsz--kasse-extern) .fsz-nav-preis { display: block; flex: none; font: 700 1.05rem/1.2 var(--fsz-mono); color: var(--fsz-preisfarbe); white-space: nowrap; transition: opacity .2s; }
    .fsz-nav-preis.is-laedt { opacity: .45; }
    .fsz-nav-preis:empty { display: none !important; }
    .fsz-preis { font-size: 1.45rem; }
    /* Tipp-Modus (Tastatur offen): flache Nahansicht, keine Leisten (im Shop liegt die Vorschau außerhalb der App) */
    .fsz--tippen .fsz-canvas, html.fsz-tippen .fsz-extern .fsz-canvas { aspect-ratio: 16 / 6; }
    .fsz--tippen .fsz-vorschau .fsz-segmente, .fsz--tippen .fsz-fotoleiste, .fsz--tippen .fsz-kasse, .fsz--tippen .fsz-nav,
    html.fsz-tippen .fsz-extern .fsz-segmente, html.fsz-tippen .fsz-extern .fsz-fotoleiste { display: none; }
}
/* niedrige Handys (320 × 640 & Co.): höchstens 45 % der Höhe */
@media (max-width: 900px) and (max-height: 700px) {
    .fsz-canvas {
        max-height: calc(45vh - var(--fsz-vorschau-rest, 56px) - var(--fsz-leiste-unten, 0px));
        max-height: calc(45dvh - var(--fsz-vorschau-rest, 56px) - var(--fsz-leiste-unten, 0px)); }
}
/* Sehr schmal (≤ 380 px): Tab-Namen passen ohne Abschneiden; der Weiter-Text kürzt sich selbst (_weiterEinpassen) */
@media (max-width: 380px) {
    .fsz-tabs { column-gap: .3rem; }
    .fsz-tab-titel { font-size: .72rem; letter-spacing: 0; }
    .fsz .fsz-weiter { padding: 12px 12px; gap: 8px; }
}
/* Querformat / starker Zoom: nichts kleben lassen, sonst bleibt kein Platz zum Bedienen */
@media (max-height: 560px) {
    .fsz-vorschau, .fsz-kasse, .fsz .fsz-nav { position: static !important; }
    /* klebt nicht → Bühne darf fast das ganze Fenster nutzen */
    .fsz-canvas { max-height: calc(100vh - 7rem); max-height: calc(100dvh - 7rem); }
}

/* ===== Logo-Import ===== */
/* Upload-Bereich: Formate, Datenschutz, Fortschritt */
.fsz-dropzone .fsz-dropzone-formate { font-weight: 400; font-size: 0.8rem; color: var(--fsz-grau); }
.fsz-dropzone[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.fsz-li-status { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; color: var(--fsz-text); background: var(--fsz-fläche); border: 1px solid var(--fsz-linie-leicht); border-radius: 10px; padding: 0.6rem 0.8rem; }
.fsz-li-lädt { display: inline-block; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--fsz-linie, #d1d5db); border-top-color: var(--fsz-akzent, #b71818); animation: fsz-li-dreh 0.8s linear infinite; }
@keyframes fsz-li-dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fsz-li-lädt { animation-duration: 2.4s; } }
.fsz-upload-hinweise { display: flex; flex-direction: column; gap: 0.3rem; }
.fsz-datenschutz { display: flex; gap: 0.4rem; align-items: flex-start; }
.fsz-datenschutz i { flex: none; color: var(--fsz-ok); margin-top: 0.2rem; }
.fsz-datenschutz.fsz-rechte i { color: var(--fsz-grau); }

/* Dialoge (Seitenwahl, Vektorisieren) – Hülle .fsz-dialog kommt aus dem Grundstil */
.fsz-li { background: #fff; border-radius: 14px; width: min(1040px, 100%); max-height: calc(100dvh - 32px); overflow: auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 0.7rem; padding: 1rem 1.1rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3); font-size: 15px; color: #2F3E46; font-family: var(--fsz-mono); }
.fsz-li h3 { margin: 0; font-size: 1.1rem; }
.fsz-li .fsz-klein { font-family: var(--fs-font-body, Merriweather, serif); font-size: 0.85rem; color: var(--fsz-grau); margin: 0; }
.fsz-li-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.fsz-li .fsz-x { cursor: pointer; }
.fsz-li .fsz-chip { cursor: pointer; border: 1px solid var(--fsz-linie); background: #fff; border-radius: 999px; padding: 0.4rem 0.9rem; min-height: 44px; font-weight: 600; font-size: 0.9rem; }
.fsz-li .fsz-chip.is-aktiv { border-color: var(--fsz-akzent); background: var(--fsz-tint); box-shadow: inset 0 0 0 1px var(--fsz-akzent); }
.fsz-li .fs-btn { width: auto; min-height: 48px; border: 0; border-radius: .5rem; padding: 0.8rem 1.4rem; font: 700 1rem var(--fs-font-headline, 'Varela Round', system-ui, sans-serif); background: var(--fsz-akzent); color: #fff; cursor: pointer; }
.fsz-li .fs-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.fsz-li-fuß { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; justify-content: flex-end; }

/* Seitenwahl */
.fsz-li-seiten { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: max-content; gap: 0.7rem; overflow: auto; min-height: 0; padding: 2px; }
.fsz-li-seite { display: flex; flex-direction: column; gap: 0.35rem; align-items: stretch; border: 1px solid var(--fsz-linie); background: #fff; border-radius: 10px; padding: 0.5rem; cursor: pointer; text-align: center; min-height: 44px; }
.fsz-li-seite:hover { border-color: var(--fsz-akzent); background: var(--fsz-tint); }
.fsz-li-seite-bild { flex: none; display: flex; align-items: center; justify-content: center; height: 120px; padding: 6px; box-sizing: border-box; background: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 0 0 / 16px 16px; border-radius: 6px; overflow: hidden; }
.fsz-li-seite-canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 1px 4px rgba(0,0,0,0.15); background: #fff; }
.fsz-li-seite-nr { font-weight: 600; font-size: 0.85rem; }

/* Vektorisieren */
.fsz-li-haupt { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, 1fr); gap: 1rem; min-height: 0; }
.fsz-li-links { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.fsz-li-bühne { position: relative; min-height: 240px; height: min(52dvh, 460px); background: repeating-conic-gradient(#e9edf0 0% 25%, #fff 0% 50%) 0 0 / 18px 18px; border: 1px solid #E8EEF2; border-radius: 10px; box-sizing: border-box; overflow: hidden; }
.fsz-li-svg, .fsz-li-original { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.fsz-li-svg svg { display: block; width: 100%; height: 100%; }
.fsz-li-original { object-fit: contain; }
.fsz-li-rechnet { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.92); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.8rem; }
.fsz-li-regler { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.fsz-li-gruppe { display: flex; flex-direction: column; gap: 0.4rem; }
.fsz-li-gruppe > b { font-size: 0.85rem; }
.fsz-li-zahl { min-width: 44px; padding: 0.4rem 0.6rem !important; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.fsz-li-zahl small { font-size: 0.62rem; font-weight: 400; color: var(--fsz-grau); }
.fsz-li-regler input[type=range] { width: 100%; accent-color: var(--fsz-akzent); min-height: 32px; }
.fsz-li-skala { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--fsz-grau); }
.fsz-li-farben { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; font-size: 0.85rem; }
.fsz-li-farbe { display: inline-flex; align-items: center; gap: 0.35rem; }
.fsz-li-farbe i { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.18); flex: none; }
.fsz-li-farbe.is-weg { color: var(--fsz-grau); text-decoration: line-through; }
.fsz-li-hinweise { display: flex; flex-direction: column; gap: 0.4rem; }
@media (max-width: 760px) {
    /* Bottom-Sheet wie die Logo-Auswahl (Griff + Wischen, Blatt.js) */
    .fsz-li-hülle { padding: 0; place-items: end stretch; }
    .fsz-li { width: 100%; height: 94vh; height: 94dvh; max-height: 94dvh; border-radius: 16px 16px 0 0; padding: 0.8rem 16px 0; }
    .fsz-li > .fsz-blatt-griff { display: block; position: relative; flex: none; height: 18px; margin: -.5rem 0 -.4rem; touch-action: none; cursor: grab; }
    .fsz-li-kopf { touch-action: none; }
    .fsz-li-haupt { grid-template-columns: minmax(0, 1fr); }
    .fsz-li-bühne { height: 38dvh; min-height: 200px; }
    .fsz-li-seiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fsz-li-fuß { position: sticky; bottom: 0; background: #fff; padding: 0.5rem 0 calc(0.8rem + env(safe-area-inset-bottom, 0px)); margin-top: auto; }
    .fsz-li-seite-bild { height: 96px; }
    .fsz-li-fuß .fs-btn { flex: 1 1 auto; }
}

/* ===== Schriften & Konturverstärkung ===== */
/* Schriftwahl: Standard-Raster, darunter „Mehr Schriften“ (aufklappbar). Reihen gehen immer auf: die Spaltenzahl
   setzt fs-schriftzug.js je Raster als Teiler der Kachelzahl (--fsz-spalten-breit ≤ 4, --fsz-spalten-schmal ≤ 2),
   die Container-Query auf die Breite der Schriftwahl wählt zwischen beiden (auch mobil ein Raster, keine Wischleiste).
   Der Vorschautext passt sich der Kachel an (fs-schriftzug.js _schriftProbenEinpassen), nichts wird abgeschnitten. */
.fsz-schriftwahl { display: flex; flex-direction: column; gap: 0.45rem; container: fszschrift / inline-size; }
.fsz-schriftwahl .fsz-schriften { display: grid; grid-template-columns: repeat(var(--fsz-spalten-schmal, 2), minmax(0, 1fr)); gap: 0.45rem; overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
@container fszschrift (min-width: 500px) { .fsz-schriftwahl .fsz-schriften { grid-template-columns: repeat(var(--fsz-spalten-breit, 4), minmax(0, 1fr)); } }
.fsz-schriftwahl .fsz-schriften[hidden] { display: none; }
.fsz-schriftwahl .fsz-schrift { flex: none; min-width: 0; }
.fsz-schriftwahl .fsz-schrift-probe { max-width: 100%; text-overflow: clip; }
/* „Mehr Schriften“: Pill wie „Alle 40 Farben“, Chevron statt Unterstrich */
.fsz .fsz-mehr-schriften { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.3rem 0.95rem; border: 1px solid var(--fsz-linie); border-radius: 999px; background: #fff; color: var(--fsz-text); font: 600 0.85rem/1.2 var(--fsz-mono); text-decoration: none; cursor: pointer; }
.fsz .fsz-mehr-schriften i { font-size: 0.95rem; }
.fsz .fsz-mehr-schriften.is-aktiv { border-color: var(--fsz-akzent); background: var(--fsz-tint); box-shadow: inset 0 0 0 1px var(--fsz-akzent); }
@media (hover: hover) { .fsz .fsz-mehr-schriften:hover { border-color: var(--fsz-text); } }
/* Status „rechnet“ (Worker) */
.fsz-status.is-rechnet { background: rgba(255,255,255,0.95); color: var(--fsz-grau); }
.fsz-status.is-rechnet i { display: inline-block; animation: fsz-drehen 0.9s linear infinite; }
@keyframes fsz-drehen { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fsz-status.is-rechnet i { animation: none; } }
/* Logo-Optionen: Linien als Teile, Konturverstärkung */
.fsz-logooption { display: flex; flex-direction: column; gap: 0.15rem; }
.fsz-logooption-unter { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; padding-left: calc(22px + 0.55rem); font-size: 0.85rem; }
.fsz-logooption-unter select { font: inherit; min-height: 36px; padding: 0.2rem 0.5rem; border: 1px solid var(--fsz-linie); border-radius: 8px; background: #fff; color: var(--fsz-text); }
.fsz-logooption-hinweis { font-size: 0.82rem; line-height: 1.4; color: var(--fsz-grau); }
.fsz-logooption-hinweis.is-warn { color: var(--fsz-warn); }
.fsz-logooption-hinweis .fsz-link { min-height: 32px; font-size: inherit; }
.fsz-kaufgrund .fsz-verstärken-link { font-weight: 700; }

/* ===== Vorschläge ===== */
/* „Ideen & Vorlagen“ in Schritt 1 (Vorschläge.js): Desktop klappt unter dem Textfeld auf, mobil Bottom-Sheet im body (.fsz-dialog) */
.fsz-vs { display: flex; flex-direction: column; gap: 0.5rem; }
.fsz-vs-knopf { display: flex; align-items: center; gap: 0.65rem; width: 100%; min-height: 52px; box-sizing: border-box; padding: 0.5rem 0.8rem; border: 1px dashed var(--fsz-linie); border-radius: 10px; background: var(--fsz-fläche); text-align: left; }
.fsz-vs-knopf:hover { border-color: var(--fsz-text); }
.fsz-vs-icon { font-size: 1.35rem; color: var(--fsz-akzent); flex: none; }
.fsz-vs-knopftext { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.fsz-vs-knopftext b { font: 700 0.92rem/1.3 var(--fs-font-headline, 'Varela Round', system-ui, sans-serif); }
.fsz-vs-knopftext small { font-size: 0.76rem; color: var(--fsz-grau); line-height: 1.35; }
.fsz-vs-pfeil { flex: none; transition: transform .2s; }
.fsz-vs-knopf[aria-expanded=true] { border-style: solid; border-color: var(--fsz-akzent); background: #fff; }
.fsz-vs-knopf[aria-expanded=true] .fsz-vs-pfeil { transform: rotate(180deg); }
.fsz-vs-panel { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.7rem; border: 1px solid var(--fsz-linie-leicht); border-radius: var(--fsz-radius); background: #fff; box-sizing: border-box; min-width: 0; }
.fsz-vs-kopf { display: none; align-items: center; justify-content: space-between; gap: 0.5rem; }
.fsz-vs-titel { margin: 0 !important; font: 700 1.05rem/1.3 var(--fs-font-headline, 'Varela Round', system-ui, sans-serif) !important; letter-spacing: 0 !important; text-transform: none !important; }
.fsz-vs-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--fsz-senke); }
.fsz-vs-tab { flex: 1; min-height: 40px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: 0.88rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.fsz-vs-tab[aria-selected=true] { background: #fff; box-shadow: 0 1px 3px rgba(20,33,42,0.16); color: var(--fsz-akzent); }
.fsz-vs-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 2px 1px; }
.fsz-vs-chip { flex: none; min-height: 36px; padding: 0.3rem 0.8rem; border: 1px solid var(--fsz-linie); border-radius: 999px; background: #fff; font-size: 0.8rem; font-weight: 600; white-space: nowrap; scroll-snap-align: start; }
.fsz-vs-chip[aria-pressed=true] { border-color: var(--fsz-akzent); background: var(--fsz-tint); box-shadow: inset 0 0 0 1px var(--fsz-akzent); }
.fsz-vs-liste { list-style: none; margin: 0; padding: 2px; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 0.5rem; max-height: 440px; overflow-y: auto; overscroll-behavior: contain; }
.fsz-vs-liste.is-motive { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.fsz-vs-liste:focus-visible { outline: 3px solid var(--fsz-fokus); outline-offset: 2px; }
.fsz-vs-liste > li { display: flex; min-width: 0; }
.fsz-vs-karte { container-type: inline-size; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0.3rem; padding: 0.55rem 0.5rem 0.45rem; border: 1px solid var(--fsz-linie-leicht); border-radius: 10px; background: #fff; text-align: center; transition: border-color .15s, box-shadow .15s; }
@media (hover: hover) { .fsz-vs-karte:hover { border-color: var(--fsz-linie); box-shadow: 0 2px 8px rgba(20,33,42,0.08); } }
.fsz-vs-karte.is-aktiv { border-color: var(--fsz-akzent); background: var(--fsz-tint); box-shadow: inset 0 0 0 1px var(--fsz-akzent); }
.fsz-vs-karte[aria-busy=true] { opacity: 0.6; cursor: progress; }
.fsz-vs-probe { flex: 1; min-height: 66px; display: flex; align-items: center; justify-content: center; white-space: pre; line-height: 1.12; color: #2f2e31; overflow: hidden;
    font-size: clamp(12px, calc(var(--k, 12) * 1cqi), var(--max, 30px)); }
.fsz-vs-probetext { display: inline-block; white-space: pre; text-align: center; }
/* Motiv als Hintergrundbild (Shop-Themes setzen img-Höhen gern auf auto) */
.fsz-vs-bild { display: block; aspect-ratio: 4 / 3; box-sizing: border-box; padding: 9%; border-radius: 7px;
    background-color: #f4f1ec; background-repeat: no-repeat; background-position: center; background-size: contain; background-origin: content-box; }
.fsz-vs-name { font: 700 0.8rem/1.25 var(--fs-font-headline, 'Varela Round', system-ui, sans-serif); }
.fsz-vs-meta { font-size: 0.7rem; color: var(--fsz-grau); line-height: 1.3; }
.fsz-vs-fuß { margin: 0; }
/* Mobil: Bottom-Sheet */
.fsz-vs-sheet { place-items: end stretch; padding: 0; }
.fsz-vs-sheet .fsz-vs-panel { width: 100%; max-height: min(86dvh, 720px); border: 0; border-radius: 16px 16px 0 0; padding: 0.8rem 16px calc(0.8rem + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,0.25); font-size: 15px; font-family: var(--fs-font-mono, 'Space Mono', ui-monospace, monospace); color: var(--fsz-text); }
.fsz-vs-sheet .fsz-vs-kopf { display: flex; }
.fsz-vs-sheet .fsz-vs-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; scroll-snap-type: x proximity; flex: none; }
.fsz-vs-sheet .fsz-vs-liste { max-height: none; flex: 1; min-height: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fsz-vs-sheet .fsz-vs-liste.is-motive { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fsz-vs-sheet .fsz-x { cursor: pointer; }
.fsz-vs-sheet :where(button) { cursor: pointer; }
html.fsz-vs-gesperrt, html.fsz-vs-gesperrt body { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
    .fsz-vs-sheet { transition: background-color .2s; background-color: rgba(20,33,42,0); }
    .fsz-vs-sheet.is-offen { background-color: rgba(20,33,42,0.55); }
    .fsz-vs-sheet .fsz-vs-panel { transform: translateY(24px); opacity: 0; transition: transform .22s ease-out, opacity .18s; }
    .fsz-vs-sheet.is-offen .fsz-vs-panel { transform: none; opacity: 1; }
}
@media (forced-colors: active) { .fsz-vs-karte.is-aktiv, .fsz-vs-chip[aria-pressed=true], .fsz-vs-tab[aria-selected=true] { outline: 2px solid Highlight; } }

/* ===== Verlauf ===== */
/* Rückgängig/Wiederholen (Verlauf.js): oben rechts im Panel, auf Höhe der ersten Überschrift jedes Schritts.
   Der Anker hat keine Höhe und hebt den Panel-Abstand auf → die Tabs werden weder verdrängt noch verschoben. */
.fsz-verlauf-anker { position: relative; height: 0; margin-bottom: -1.25rem; z-index: 3; }
.fsz-verlauf { position: absolute; right: -6px; top: -9px; display: flex; gap: 2px; }
.fsz .fsz-verlauf-knopf {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; margin: 0; border: 0; border-radius: 8px; background: transparent;
    color: var(--fsz-grau); font-size: 1.1rem; line-height: 1; cursor: pointer; touch-action: manipulation;
    transition: background-color .15s, color .15s, opacity .15s;
}
.fsz .fsz-verlauf-knopf i { font-size: 1.1rem; line-height: 1; }
@media (hover: hover) { .fsz .fsz-verlauf-knopf:hover { background: var(--fsz-senke); color: var(--fsz-text); } }
.fsz .fsz-verlauf-knopf:active { transform: scale(.94); }
.fsz .fsz-verlauf-knopf:focus-visible { outline: 2px solid var(--fsz-fokus); outline-offset: 1px; }
.fsz .fsz-verlauf-knopf[aria-disabled=true] { opacity: .35; cursor: default; transform: none; }
@media (hover: hover) { .fsz .fsz-verlauf-knopf[aria-disabled=true]:hover { background: transparent; color: var(--fsz-grau); } }
/* Tooltip (Maus/Tastatur) unter dem Knopf, rechtsbündig; Touch hat aria-label */
@media (hover: hover) and (pointer: fine) {
    .fsz .fsz-verlauf-knopf[data-tipp]:hover::after, .fsz .fsz-verlauf-knopf[data-tipp]:focus-visible::after {
        content: attr(data-tipp); position: absolute; right: 0; top: calc(100% + 6px);
        padding: 5px 8px; border-radius: 6px; background: var(--fsz-dunkel); color: #fff;
        font: 400 .72rem/1.25 var(--fsz-mono); letter-spacing: 0; white-space: nowrap; pointer-events: none; z-index: 9;
    }
    .fsz .fsz-verlauf:hover .fsz-verlauf-knopf:focus-visible:not(:hover)::after { display: none; }
}
/* Mobil: 44-px-Ziele; oben bündig mit dem Ende der Tabs, unten nicht in das erste Bedienelement */
@media (max-width: 900px), (pointer: coarse) {
    .fsz-verlauf { top: -19px; right: -8px; gap: 0; }
    .fsz .fsz-verlauf-knopf { width: 44px; height: 44px; }
}

/* Hinweis nach Farbänderung: „Farbe geändert · Rückgängig“, unten im Panel (klebt über der Weiter-Leiste bzw. der
   Kaufleiste des Shops, --fsz-leiste-h); der Anker hat keine Höhe und hebt den Panel-Abstand auf */
.fsz-snack-anker { position: sticky; bottom: calc(max(var(--fsz-unten, 0px), var(--fsz-leiste-h, 0px)) + 12px); height: 0; margin-top: -1.25rem; z-index: 8; }
.fsz-snack {
    position: absolute; left: 50%; bottom: var(--fsz-snack-hub, 0px); transform: translate(-50%, 8px); box-sizing: border-box;
    display: flex; align-items: center; gap: .5rem; width: max-content; max-width: 100%;
    padding: 0 4px 0 16px; border-radius: 10px; background: var(--fsz-dunkel); color: #fff;
    box-shadow: 0 8px 24px rgba(20,33,42,.28); font: 600 .85rem/1.25 var(--fsz-mono); letter-spacing: .01em;
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s, bottom .2s;
}
.fsz-snack:empty { padding: 0; box-shadow: none; }
.fsz-snack.is-an { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.fsz-snack-punkt { opacity: .55; }
.fsz .fsz-snack-knopf {
    min-height: 44px; padding: 0 12px; margin: 0; border: 0; border-radius: 8px; background: transparent;
    color: #fff; font: 700 .85rem/1 var(--fsz-mono); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
@media (hover: hover) { .fsz .fsz-snack-knopf:hover { background: rgba(255,255,255,.12); } }
.fsz .fsz-snack-knopf:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .fsz-snack, .fsz-snack.is-an { transform: translate(-50%, 0); transition: opacity .15s; } }
/* Kauf läuft: Knöpfe sind gesperrt (Verlauf.js), der Hinweis mit „Rückgängig“ verschwindet */
.fsz.is-kauf .fsz-snack-anker { visibility: hidden; }
@media (forced-colors: active) { .fsz-snack { border: 1px solid CanvasText; } .fsz .fsz-verlauf-knopf { border: 1px solid ButtonText; } }

/* ======================================================================================================
   Mobil-App (≤ 900 px, Klasse .fsz--mobil setzt fs-schriftzug.js): oben nur Header + kompakte Titelzeile,
   darunter die Bühne 1:1 (klebt), unter ihr Schritt-Tabs und nur die Auswahl des Schritts; Eingaben in
   Klappbereichen (Kopf zeigt den Wert), Preis + Weiter/Warenkorb in der klebenden Leiste.
   Desktop: die Hüllen dieses Abschnitts sind unsichtbar (Köpfe aus, Inhalte display: contents).
   ====================================================================================================== */
.fsz-klapp-kopf, .fsz-größen-chips, .fsz-seg-ico, .fsz-mehr-kurz, .fsz-nav-preisblock, .fsz-hilfe-knopf { display: none; }
.fsz-klapp-inhalt, .fsz-eingabezeile { display: contents; }
/* Gruppe „Umgebung“ der Leiste ist am Desktop leer (die Segmente stehen über der Bühne): Trennlinie wie vorher erst ab der 2. Gruppe */
.fsz-steuer > .fsz-sk-gruppe[data-gruppe=umgebung]:empty + .fsz-sk-gruppe { border-left: 0; }

@media (max-width: 900px) {
    /* ---------- Bühne: 1:1, klebt unter dem Header; darunter bleiben mind. --fsz-bedien für Tabs, Auswahl und Leiste ---------- */
    .fsz-vorschau .fsz-segmente { display: none; }            /* Umgebung steckt als Symbole in der Leiste der Bühne */
    .fsz-vorschau { --fsz-bedien: 280px; }
    .fsz-extern .fsz-vorschau { padding: 0; gap: 0; }
    .fsz-bühne-knöpfe { top: 8px; right: 8px; }
    .fsz-etikett { left: 8px; top: 8px; }
    /* Rückgängig/Wiederholen oben rechts in der Bühne (neben „Bild speichern“), erst sichtbar, wenn es etwas gibt */
    .fsz .fsz-bühne-knöpfe .fsz-verlauf { position: static; display: flex; gap: 6px; }
    .fsz .fsz-bühne-knöpfe .fsz-verlauf-knopf { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--fsz-text); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
    .fsz .fsz-bühne-knöpfe .fsz-verlauf-knopf[aria-disabled=true] { opacity: .4; }
    .fsz .fsz-bühne-knöpfe .fsz-verlauf:not(:has(.fsz-verlauf-knopf:not([aria-disabled=true]))) { display: none; }
    .fsz-bühne:has(.fsz-bühne-knöpfe .fsz-verlauf-knopf:not([aria-disabled=true])) .fsz-etikett { max-width: calc(100% - 172px); }
    html.fsz-tippen .fsz-bühne-knöpfe { display: none; }
    /* „Möbel antippen zum Ausblenden“: kurz oben in der Bühne (unter Status und Knöpfen), nie über der Leiste */
    .fsz .fsz-bühne .fsz-möbel-hinweis, .fsz .fsz-bühne:has(> .fsz-steuer.is-offen) .fsz-möbel-hinweis { top: 60px; bottom: auto; transform: translate(-50%, -6px); }
    .fsz .fsz-bühne .fsz-möbel-hinweis.is-an { transform: translate(-50%, 0); }

    /* Umgebung als Segment-Symbole in der Leiste (Beispielwand · Nah · Meine Wand) */
    .fsz-steuer [data-gruppe=umgebung] { gap: 0; }
    .fsz .fsz-steuer .fsz-seg { flex: 0 1 44px; width: 44px; min-width: 0; height: var(--fsz-sk); min-height: 0; padding: 0; gap: 0; border-radius: 8px;
        background: transparent; box-shadow: none; color: var(--fsz-text); font-size: 1.1rem; }
    .fsz .fsz-steuer .fsz-seg i { font-size: 1.1rem; line-height: 1; }
    .fsz .fsz-steuer .fsz-seg :is(.fsz-lang, .fsz-kurz, .fsz-seg-text) { display: none; }
    .fsz .fsz-steuer .fsz-seg .fsz-seg-ico { display: inline; }
    .fsz .fsz-steuer .fsz-seg.is-aktiv { background: var(--fsz-senke); box-shadow: inset 0 0 0 1px var(--fsz-linie); }
    .fsz-steuer.is-offen [data-gruppe=umgebung] { display: none; }
    /* eingeklappt: Umgebung, Raum, Maße, Ansicht (nur Symbol), Zurücksetzen nur nach einer Änderung (wie bisher);
       unter 360 px Bühnenbreite passt es nicht mehr dazu → dort nur in der ausgefahrenen Leiste */
    @container fszv (max-width: 359.98px) { .fsz-steuer:not(.is-offen) .fsz-sk[data-modus=zurücksetzen] { display: none; } }
    .fsz .fsz-steuer:not(.is-offen) .fsz-sk-schalter { flex: 0 1 44px; width: 44px; padding: 0; }
    .fsz-steuer:not(.is-offen) .fsz-sk-schalter :is(.fsz-sk-text, .fsz-sk-pfeil) { display: none; }
    /* Touch unter 360 px Bühnenbreite: ausgefahren passen nur 7 Knöpfe à 44 px → ohne ↺ ↻ (zwei Finger drehen die Ansicht;
       Verschieben bleibt: ohne den Umschalter könnten zwei Finger nicht verschieben) */
    @container fszv (max-width: 359.98px) { @media (pointer: coarse) { .fsz-steuer [data-gruppe=drehen] { display: none; } } }
    @container fszv (max-width: 619.98px) {
        .fsz-steuer:not(.is-offen) { padding: 2px; }
        /* ausgefahren liegt die Leiste IN der Bühne (unten, volle Breite) statt darunter: die Bühne bleibt 1:1 und springt nicht */
        .fsz-steuer.is-offen { position: absolute; left: 0; right: 0; bottom: 0; width: auto; z-index: 3;
            background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
        .fsz-bühne:has(> .fsz-steuer.is-offen) .fsz-canvas { --fsz-leiste-unten: 0px; }
        .fsz-bühne:has(> .fsz-steuer.is-offen) .fsz-möbel-hinweis { bottom: calc(45px + 10px); }
    }

    /* ---------- Bedienfeld ---------- */
    .fsz--mobil .fsz-panel { gap: .7rem; min-height: calc(100vh - var(--fsz-oben, 0px)); min-height: calc(100dvh - var(--fsz-oben, 0px)); }
    .fsz--mobil .fsz-schritt { gap: .6rem; }
    .fsz--mobil .fsz-block { gap: .5rem; }
    .fsz--mobil .fsz-tabs { margin-top: .35rem; }
    /* Schritt-Tabs: eine Zeile „1 Text“ … „4 Farbe“ unter dem Fortschrittsbalken, ohne „SCHRITT“ */
    .fsz.fsz--mobil .fsz-tab { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: baseline; column-gap: .3rem; min-height: 44px; padding: 13px 0 .2rem; }
    .fsz--mobil .fsz-tab::before { position: absolute; left: 0; top: 0; margin: 0; }
    .fsz--mobil .fsz-tab-titel { min-width: 0; }
    .fsz--mobil .fsz-tab .fsz-tab-nr-wort { display: none; }
    .fsz--mobil .fsz-tab-nr { font-size: .72rem; line-height: 1.3; letter-spacing: 0; }
    .fsz--mobil .fsz-tab-titel { font-size: .8rem; line-height: 1.3; }
    /* Überschriften und Erklärtexte der Schritte: nur für Screenreader (der Tab sagt, wo man ist) */
    .fsz--mobil .fsz-schritt h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
    .fsz--mobil .fsz-größe-hinweis { display: none; }

    /* Klappbereiche: Kopf „Titel Wert ✎“, Inhalt fährt darunter auf */
    .fsz--mobil .fsz-klapp-kopf { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 48px; box-sizing: border-box; margin: 0;
        padding: .35rem .75rem; border: 1px solid var(--fsz-linie); border-radius: 10px; background: #fff; text-align: left; color: var(--fsz-text);
        font: 600 .95rem/1.25 var(--fs-font-headline, 'Varela Round', system-ui, sans-serif); }
    .fsz--mobil .fsz-klapp-kopf[hidden] { display: none; }
    .fsz-klapp-titel { flex: none; font: 700 .66rem/1.2 var(--fsz-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fsz-grau); }
    .fsz-klapp-wert { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fsz-klapp-ico { flex: none; font-size: 1.1rem; color: var(--fsz-akzent); transition: transform .2s; }
    .fsz--mobil .fsz-klapp-kopf.is-offen { border-color: var(--fsz-akzent); box-shadow: inset 0 0 0 1px var(--fsz-akzent); }
    .fsz-klapp-kopf.is-offen .fsz-klapp-ico.ph-caret-down { transform: rotate(180deg); }
    .fsz--mobil .fsz-klapp-inhalt { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
    .fsz--mobil .fsz-klapp-inhalt.is-zu { display: none; }
    @media (prefers-reduced-motion: no-preference) {
        .fsz--mobil .fsz-klapp-inhalt:not(.is-zu) { animation: fsz-klapp-auf .18s ease-out; }
        @keyframes fsz-klapp-auf { from { opacity: 0; transform: translateY(-4px); } }
    }

    /* Schritt 1: Text | Logo, darunter eine Zeile „Text ✎“ bzw. Upload + „Ideen“, dann die Schriften als Wischleiste */
    .fsz--mobil .fsz-modus .fsz-modus-knopf { min-height: 44px; }
    .fsz--mobil .fsz-eingabezeile { display: flex; flex-wrap: wrap; align-items: stretch; gap: .5rem; }
    .fsz--mobil .fsz-eingabezeile > :is(.fsz-klapp-kopf, .fsz-dropzone) { flex: 1 1 0; width: auto; min-width: 0; }
    .fsz--mobil .fsz-eingabezeile > .fsz-vs { flex: none; }
    .fsz--mobil .fsz-eingabezeile > .fsz-li-status { flex: 1 1 100%; }
    .fsz--mobil .fsz-eingabezeile .fsz-vs-knopf { width: auto; height: 100%; min-height: 48px; padding: .35rem .8rem; gap: .4rem; border-style: solid; background: #fff; }
    .fsz--mobil .fsz-eingabezeile .fsz-vs-knopf :is(small, .fsz-vs-lang, .fsz-vs-pfeil) { display: none; }
    .fsz--mobil .fsz-eingabezeile .fsz-vs-knopftext b { font-size: .9rem; }
    .fsz--mobil .fsz-dropzone { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; column-gap: .6rem; row-gap: 0;
        min-height: 48px; padding: .35rem .75rem; text-align: left; }
    .fsz--mobil .fsz-dropzone > i { grid-row: span 2; font-size: 1.35rem; }
    .fsz--mobil .fsz-dropzone .fsz-dz-ziehen { display: none; }
    .fsz--mobil .fsz-dropzone .fsz-dropzone-formate { font-size: .72rem; }
    /* Upload: Datenschutz- und Rechte-Satz bleiben sichtbar, die Hilfe steht hinter ⓘ */
    .fsz--mobil .fsz-upload-hinweise { font-size: .76rem; line-height: 1.4; gap: .2rem; }
    .fsz--mobil .fsz-upload-hilfe:not(.is-offen) { display: none; }
    .fsz--mobil .fsz-hilfe-knopf { display: inline-flex; align-self: flex-start; align-items: center; gap: .35rem; min-height: 44px; padding: 0; border: 0; background: none;
        font: 600 .78rem var(--fsz-mono); color: var(--fsz-fokus); text-decoration: underline; text-underline-offset: 2px; }
    .fsz--mobil .fsz-hilfe-knopf[aria-expanded=true] { text-decoration: none; }
    .fsz--mobil .fsz-logochip { min-height: 44px; }
    /* Schriften: eine Wischleiste, „+18“ als Kachel rechts daneben (klappt „Mehr Schriften“ in die Leiste) */
    .fsz--mobil .fsz-schriftblock { flex-direction: row; align-items: stretch; gap: .5rem; }
    .fsz--mobil .fsz-schriftwahl { position: relative; flex: 1 1 auto; min-width: 0; display: flex; flex-direction: row; gap: .45rem; padding: 2px 1px;
        overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
    .fsz--mobil .fsz-schriftwahl::-webkit-scrollbar { display: none; }
    .fsz--mobil .fsz-schriftwahl .fsz-schriften { display: contents; }
    .fsz--mobil .fsz-schriftwahl .fsz-schrift { flex: 0 0 104px; min-height: 60px; padding: .45rem .4rem .35rem; scroll-snap-align: start; }
    .fsz--mobil .fsz-schriftwahl .fsz-schrift-probe { font-size: 1.05rem; }
    .fsz .fsz--mobil .fsz-mehr-schriften, .fsz--mobil .fsz-mehr-schriften { flex: 0 0 56px; align-self: stretch; flex-direction: column; justify-content: center; gap: .1rem;
        min-height: 60px; padding: .25rem; border-radius: 10px; }
    .fsz--mobil .fsz-mehr-schriften .fsz-mehr-text { display: none; }
    .fsz--mobil .fsz-mehr-schriften .fsz-mehr-kurz { display: block; font: 700 .82rem/1.1 var(--fsz-mono); }
    .fsz--mobil .fsz-mehr-schriften i { transform: rotate(-90deg); }
    .fsz--mobil .fsz-mehr-schriften.is-offen i { transform: rotate(90deg); }

    /* Wischreihen (Oberflächen, Farben, Größen): eine Zeile, rechts ausgeblendet = es geht weiter */
    .fsz--mobil .fsz-wischreihe { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
        padding: 3px 2px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
    .fsz--mobil .fsz-wischreihe::-webkit-scrollbar { display: none; }
    .fsz--mobil .fsz-wischreihe > * { flex: none; scroll-snap-align: start; white-space: nowrap; }
    .fsz--mobil .fsz-farben { gap: .4rem; }
    .fsz--mobil .fsz-farbe { width: 44px; height: 44px; }
    .fsz--mobil .fsz-farbe.fsz-mehr { min-height: 44px; }
    .fsz--mobil .fsz-farbname { font-size: .8rem; min-height: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Schritt 2: Wert-Kopf, (Felder), Regler, Schnellwahl */
    .fsz--mobil .fsz-größen-chips { display: flex; }
    .fsz--mobil .fsz-größenblock > .fsz-klapp-kopf { order: 1; }
    .fsz--mobil .fsz-größenblock > .fsz-klapp-inhalt { order: 2; }
    .fsz--mobil .fsz-größenblock > .fsz-größe { order: 3; }
    .fsz--mobil .fsz-größenblock > .fsz-größen-chips { order: 4; }
    .fsz--mobil .fsz-größenblock > .fsz-grenze { order: 5; }
    .fsz--mobil .fsz-größe input[type=range] { margin: 0; }

    /* Schritt 3: Materialien nebeneinander, Stärke als Zeile mit kleinem Label */
    .fsz--mobil .fsz-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .fsz--mobil .fsz-karte { gap: .5rem; padding: .5rem .55rem; min-height: 56px; }
    .fsz--mobil .fsz-karte .fsz-muster { width: 28px; height: 28px; }
    #fsSchriftzug.fsz--mobil .fsz-karte b, .fsz--mobil .fsz-karte b { font-size: .8rem; overflow-wrap: break-word; hyphens: auto; }
    .fsz--mobil .fsz-karte small { font-size: .7rem; line-height: 1.35; }
    .fsz--mobil .fsz-dickeblock { flex-direction: row; align-items: center; gap: .6rem; }
    .fsz--mobil .fsz-schritt .fsz-dickeblock > h3 { position: static; width: auto; height: auto; overflow: visible; clip: auto; flex: none;
        font-size: .66rem; letter-spacing: .08em; color: var(--fsz-grau); }

    /* Schritt 4: Oberfläche, Farben, Mehrfarbig; Montage im Klappbereich */
    .fsz--mobil .fsz-schalter { font-size: .85rem; }
    .fsz--mobil .fsz-musterlink { font-size: .8rem; min-height: 44px; display: inline-flex; align-items: center; }
    .fsz--mobil .fsz-extras { gap: .5rem; }

    /* ---------- Kasse (nur im letzten Schritt): „Details“ mit Lieferung, Menge, Stückliste; Preis + Knopf in der Leiste ---------- */
    .fsz--mobil:not(.fsz--letzter-schritt) .fsz-kasse { display: none; }
    .fsz--mobil .fsz-kasse { order: 1; padding-top: .6rem; gap: .5rem; }
    .fsz--mobil .fsz-snack-anker { order: 2; }
    .fsz--mobil .fsz-kasse-preis, .fsz--mobil .fsz .fsz-sl-knopf, .fsz.fsz--mobil .fsz-sl-knopf { display: none !important; }
    .fsz--mobil .fsz-lieferzeit { margin-bottom: 0; padding: 8px 12px; font-size: .82rem; }
    .fsz--mobil .fsz-fertigung { font-size: .82rem; }

    /* ---------- Leiste unten: zurück · Preis (inkl. USt., zzgl. Versand) · Weiter bzw. In den Warenkorb ---------- */
    .fsz--mobil:not(.fsz--kasse-extern) .fsz-nav { order: 3; margin-top: auto; position: sticky; bottom: 0; z-index: 6; flex-wrap: wrap; gap: .5rem;
        padding: .5rem 0 calc(.5rem + env(safe-area-inset-bottom, 0px)); border-image: linear-gradient(var(--fsz-linie) 0 1px, #fff 1px) fill 0 // 0 100vmax; }
    .fsz--mobil .fsz .fsz-weiter, .fsz.fsz--mobil .fsz-weiter, .fsz.fsz--mobil .fsz-nav-zurück { min-height: 48px; }
    /* Basis 0: die Leiste bricht nie um (Text kürzt _weiterEinpassen bzw. der Warenkorb-Knopf zweizeilig) */
    .fsz.fsz--mobil .fsz-weiter { flex: 1 1 0; }
    .fsz.fsz--mobil .fsz-nav-zurück { width: 48px; }
    .fsz--mobil:not(.fsz--kasse-extern) .fsz-nav-preisblock { display: flex; flex-direction: column; justify-content: center; flex: 0 1 auto; min-width: 0; max-width: 42%; }
    .fsz--mobil .fsz-nav-preisinfo { font: 400 .62rem/1.25 var(--fsz-mono); color: var(--fsz-grau); }
    .fsz--mobil .fsz-nav-preisinfo a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
    .fsz--mobil .fsz-nav-preisinfo:empty { display: none; }
    .fsz--mobil:not(.fsz--letzter-schritt) .fsz-nav :is(.fsz-kaufen, .fsz-kaufgrund) { display: none !important; }
    .fsz--mobil .fsz-nav .fsz-kaufgrund { order: -1; flex: 1 1 100%; box-sizing: border-box; font-size: .8rem; }
    .fsz.fsz--mobil .fsz-nav .fsz-kaufen { flex: 1 1 0; width: auto; min-width: 0; margin: 0; min-height: 48px; white-space: normal; line-height: 1.15; letter-spacing: .06em;
        padding: 8px 12px !important; font-size: .78rem !important; }
}
@media (max-width: 380px) {
    .fsz--mobil .fsz-tab-titel { font-size: .76rem; letter-spacing: 0; }
    .fsz--mobil:not(.fsz--kasse-extern) .fsz-nav-preisblock { max-width: 34%; }
    .fsz.fsz--mobil .fsz-weiter { padding: 10px; gap: 6px; }
}
/* sehr schmal (320 px): im letzten Schritt kein „zurück“ in der Leiste (die Tabs führen zurück), der Warenkorb-Knopf braucht die Breite */
@media (max-width: 359.98px) {
    .fsz.fsz--mobil .fsz-tab { column-gap: .2rem; }
    .fsz--mobil .fsz-tab-titel { font-size: .74rem; letter-spacing: 0; }
    .fsz--mobil.fsz--letzter-schritt .fsz-nav-zurück { display: none; }
    .fsz.fsz--mobil .fsz-nav-zurück { width: 44px; }
    .fsz--mobil .fsz-karte small { display: none; }        /* Farbe zeigt das Muster, Stärken stehen darunter */
}
/* niedrige Handys (≤ 700 px hoch): Bedienfläche knapper → Bühne bleibt 1:1 */
@media (max-width: 900px) and (max-height: 700px) {
    .fsz-vorschau { --fsz-bedien: 260px; }
    .fsz--mobil .fsz-panel, .fsz--mobil .fsz-schritt { gap: .5rem; }
    .fsz--mobil .fsz-block { gap: .4rem; }
    .fsz--mobil .fsz-tabs { margin-top: .2rem; }
}
/* Bühne 1:1 so groß wie möglich, darunter mindestens --fsz-bedien (nicht im Querformat: dort klebt nichts) */
@media (max-width: 900px) and (min-height: 561px) {
    .fsz-canvas, .fsz--tippen .fsz-canvas {
        max-height: calc(100vh - var(--fsz-sticky-top, 0px) - var(--fsz-bedien, 280px));
        max-height: calc(100dvh - var(--fsz-sticky-top, 0px) - var(--fsz-bedien, 280px)); }
    .fsz-extern .fsz-canvas, html.fsz-tippen .fsz-extern .fsz-canvas {
        max-height: calc(100vh - var(--fsz-kopf, 56px) - var(--fsz-bedien, 280px));
        max-height: calc(100dvh - var(--fsz-kopf, 56px) - var(--fsz-bedien, 280px)); }
}

/* ---------- Shop-Artikelseite mobil (< 992 px, nur dieser Artikel: html.fsz-eingebettet) ----------
   Über der Bühne nur der Shop-Header. Artikel-Überschrift (H1, bleibt im DOM an erster Stelle für SEO und Screenreader),
   Artikelnummer/Merkzettel und Kurzbeschreibung rücken optisch unter den Konfigurator, vor die Beschreibung (order);
   Leiste über Consent-/Trusted-Knopf. */
@media (max-width: 991.98px) {
    html.fsz-eingebettet #product-offer { margin-top: 0 !important; padding-top: 0 !important; }
    html.fsz-eingebettet #product-offer > .product-gallery.fsz-galerie { padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
    html.fsz-eingebettet .fsz-galerie > .fsz-extern { margin-bottom: 0; }
    html.fsz-eingebettet #product-offer > .product-info { padding-top: 0 !important; margin-top: 0 !important; }
    html.fsz-eingebettet #product-offer .product-info-inner { display: flex; flex-direction: column; padding-top: 0 !important; margin-top: 0 !important; }
    html.fsz-eingebettet #product-offer .product-info-inner > .product-headline { order: 1; margin: 1.5rem 0 .25rem !important; }
    html.fsz-eingebettet #product-offer .product-info-inner > .product-headline .product-title { font-size: 1.35rem; line-height: 1.25; margin: 0; }
    html.fsz-eingebettet #product-offer .product-info-inner > .info-essential { order: 2; }
    html.fsz-eingebettet #product-offer .product-info-inner > .shortdesc { order: 3; }
    html.fsz-eingebettet #product-offer .product-offer > hr { display: none; }
    html.fsz-eingebettet .fsz--mobil .fsz-panel { min-height: calc(100vh - var(--fsz-kopf, 56px) - var(--fsz-galerie-h, 0px));
        min-height: calc(100dvh - var(--fsz-kopf, 56px) - var(--fsz-galerie-h, 0px)); }
    /* Abstand Header → Titelzeile: Breadcrumb ist mobil ohnehin aus (nur ihr Innenabstand bliebe), leere Hinweisliste ohne Rand */
    html.fsz-eingebettet .fs-breadcrumb-wrap { display: none; }
    html.fsz-eingebettet #alert-list:not(:has(*)) { display: none; }
    html.fsz-eingebettet #result-wrapper { margin-top: 0; }
}
@media (max-width: 900px) {
    /* Bedienfeld mit 16 px Rand (Spalte 8 px + Seite 8 px) statt 32 px */
    html.fsz-eingebettet #product-offer > .product-info { padding-left: 8px !important; padding-right: 8px !important; }
    /* Schwebende Shop-Knöpfe nicht über den Swatches: der Consent-Fingerabdruck (Pflicht, einziger Weg zu den
       Cookie-Einstellungen) sitzt links IN der Leiste, die Leiste lässt ihm Platz; das Trusted-Shops-Siegel ist mobil
       auf dieser Seite aus (Käuferschutz steht in der Trust-Zeile unter dem Konfigurator) */
    html.fsz-eingebettet #consent-manager #consent-settings-btn { left: 8px !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
    html.fsz-eingebettet:has(#consent-settings-btn) .fsz--mobil:not(.fsz--kasse-extern) .fsz-nav { padding-left: 44px; }
    html.fsz-eingebettet body > [id^="trustbadge-container"] { display: none !important; }
    /* offenes Bottom-Sheet bzw. Dialog: der Fingerabdruck läge darüber */
    html:has(.fsz-raum-blatt .fsz-raum:not([hidden])) #consent-settings-btn, html.fsz-vs-gesperrt #consent-settings-btn,
    html:has(body > .fsz-dialog) #consent-settings-btn { visibility: hidden !important; }
    /* Bewertungs-Widget im Footer (fs_v9 ts_widget_gen.tpl): die Zusammenfassung bricht bei 320 px nicht um und macht
       die Seite 349 px breit (Layout-Viewport zoomt, klebende Leiste rutscht aus dem Bild) → hier umbrechen lassen */
    html.fsz-eingebettet #footer .fs-tsw-sum { flex-wrap: wrap; min-width: 0; box-sizing: border-box; }
}
/* Header bei 320 px: Logo (168 px) + Symbole (132 px) + Abstände passen nicht in eine Zeile, die Symbole brechen unter die
   weiße Leiste um und lägen über der Bühne (Theme-Eigenheit, alle Seiten). Hier: eine Zeile mit etwas kleinerem Logo */
@media (max-width: 359.98px) {
    html.fsz-eingebettet #fs-navbar .fs-navbar-row { flex-wrap: nowrap; column-gap: 8px; padding-left: 12px; padding-right: 12px; }
    html.fsz-eingebettet #fs-navbar .fs-logo-img { height: 1.3rem !important; }
}