/* Druck und Zauber — Konfigurator Glasmarker (baut auf shop.css, configurator.css und forge.css-Klassen auf) */
@font-face { font-family: 'F-roboto'; src: url('../fonts/forge/roboto-700.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'F-montserrat'; src: url('../fonts/forge/montserrat-700.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'F-poppins'; src: url('../fonts/forge/poppins-700.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'F-nunito'; src: url('../fonts/forge/nunito-700.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'F-quicksand'; src: url('../fonts/forge/quicksand-700.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'F-comfortaa'; src: url('../fonts/forge/comfortaa-700.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'F-righteous'; src: url('../fonts/forge/righteous-400.woff') format('woff'); font-weight: 400; font-display: swap; }
.ff-roboto { font-family: 'F-roboto', sans-serif; font-weight: 700; }
.ff-montserrat { font-family: 'F-montserrat', sans-serif; font-weight: 700; }
.ff-poppins { font-family: 'F-poppins', sans-serif; font-weight: 700; }
.ff-nunito { font-family: 'F-nunito', sans-serif; font-weight: 700; }
.ff-quicksand { font-family: 'F-quicksand', sans-serif; font-weight: 700; }
.ff-comfortaa { font-family: 'F-comfortaa', sans-serif; font-weight: 700; }
.ff-righteous { font-family: 'F-righteous', sans-serif; font-weight: 400; }

.glasmarker .product-layout { grid-template-columns: 52fr 48fr; }
.gm-preview { display: flex; flex-direction: column; gap: 10px; min-height: 240px; padding: 1.4rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-card); overflow-x: auto; }
.gm-loading { color: var(--gray-mid); font-size: 0.9rem; margin: auto; }
.gm-marker { display: block; max-width: 100%; height: auto; flex: none; }
.gm-marker.is-over { opacity: 0.45; }
.gm-names { display: grid; gap: 0.6rem; margin-bottom: 0.6rem; }
.gm-row { display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; align-items: center; }
.gm-name { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 1rem; background: var(--white); color: var(--black); }
.gm-name:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.gm-color { display: flex; flex-wrap: wrap; gap: 3px; max-width: 200px; }
.gm-swatch { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.gm-swatch svg { width: 24px; height: 24px; display: block; }
.gm-swatch.is-active svg circle { stroke: var(--mint-deep); stroke-width: 3; }
.gm-swatch:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.gm-remove { width: 32px; height: 32px; border: 1px solid var(--border); background: var(--white); border-radius: 50%; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--gray-mid); }
@media (hover: hover) { .gm-remove:hover { color: var(--black); border-color: var(--mint); } }
.gm-remove[hidden] { display: none; }
.gm-fonts { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.forge-fonts { display: grid; gap: 0.4rem; }
.forge-font { border: 1px solid var(--border); background: var(--white); color: var(--black); border-radius: 10px; padding: 0.45rem 0.6rem; font-size: 1.05rem; line-height: 1.2; cursor: pointer; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .forge-font:hover { border-color: var(--mint); } }
.forge-font.is-active { background: var(--mint-pale); border-color: var(--mint-deep); box-shadow: inset 0 0 0 1px var(--mint-deep); }
.forge-font:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
.btn-cart.is-busy { opacity: 0.7; pointer-events: none; }
@media (max-width: 560px) { .gm-row { grid-template-columns: 1fr auto; } .gm-color { grid-column: 1 / -1; max-width: none; } }