/* Druck und Zauber — Konfigurator Namensanhänger (baut auf shop.css + configurator.css-Klassen auf) */

/* Schriften nur für die Auswahl-Vorschau (dieselben WOFF-Dateien nutzt opentype.js für die 3D-Geometrie) */
@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-bebas-neue'; src: url('../fonts/forge/bebas-neue-400.woff') format('woff'); font-weight: 400; 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; }
@font-face { font-family: 'F-playfair-display'; src: url('../fonts/forge/playfair-display-700.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'F-merriweather'; src: url('../fonts/forge/merriweather-700.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'F-lobster'; src: url('../fonts/forge/lobster-400.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'F-pacifico'; src: url('../fonts/forge/pacifico-400.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'F-dancing-script'; src: url('../fonts/forge/dancing-script-700.woff') format('woff'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'F-caveat'; src: url('../fonts/forge/caveat-700.woff') format('woff'); font-weight: 700; 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-bebas-neue { font-family: 'F-bebas-neue', sans-serif; font-weight: 400; }
.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; }
.ff-playfair-display { font-family: 'F-playfair-display', serif; font-weight: 700; }
.ff-merriweather { font-family: 'F-merriweather', serif; font-weight: 700; }
.ff-lobster { font-family: 'F-lobster', cursive; font-weight: 400; }
.ff-pacifico { font-family: 'F-pacifico', cursive; font-weight: 400; }
.ff-dancing-script { font-family: 'F-dancing-script', cursive; font-weight: 700; }
.ff-caveat { font-family: 'F-caveat', cursive; font-weight: 700; }

.forge .product-layout { grid-template-columns: 52fr 48fr; }
.forge-viewport { position: relative; aspect-ratio: 4 / 3; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-card); overflow: hidden; touch-action: none; }
.forge-viewport canvas { display: block; width: 100% !important; height: 100% !important; outline: none; }
.forge-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gray-mid); font-size: 0.9rem; background: var(--bg-alt); z-index: 2; }
.forge-loading[hidden] { display: none; }
.forge-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.8rem; }
.forge-stats > div { background: var(--mint-pale); border-radius: 12px; padding: 0.6rem 0.8rem; }
.forge-stats dt { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint-text); font-weight: 700; }
.forge-stats dd { margin: 0.15rem 0 0; font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .forge-stats { grid-template-columns: 1fr 1fr; } }

/* Zeilen-Karten (Klassen fc-key* aus configurator.css werden wiederverwendet) */
.forge .fc-key-head { grid-template-columns: auto 1fr auto; }
.forge .fc-key-text { font-weight: 800; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge .fc-key-body { gap: 0.9rem; }
.forge-text { width: 100%; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: 10px; font: inherit; font-size: 1.05rem; background: var(--white); color: var(--black); }
.forge-text:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }
.forge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; }
.forge-check { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.forge-check input { width: 18px; height: 18px; accent-color: var(--mint-deep); }
.forge-size { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; font-weight: 600; }
.forge-size input[type="range"] { width: 150px; accent-color: var(--mint-deep); }
.forge-size output { min-width: 3.4rem; font-variant-numeric: tabular-nums; }
.forge-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 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; transition: border-color var(--dur-fast), background var(--dur-fast); }
.forge-font small { display: block; font-family: 'Nunito', system-ui, sans-serif; font-weight: 400; font-size: 0.68rem; color: var(--gray-mid); }
@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; }
.forge-font.is-disabled { opacity: 0.45; cursor: not-allowed; }
.forge-min { margin-top: -0.2rem; }
.forge-eyelet-off .fc-swatches { opacity: 0.4; pointer-events: none; }
.btn-cart.is-busy { opacity: 0.7; pointer-events: none; }