/* Erzeugt aus konfigurator.html – nicht direkt bearbeiten, siehe build-wordpress.py */
/* Alle Regeln auf #gsb-app eingeschraenkt, damit das Theme unberuehrt bleibt. */
/* Theme-Einfluss zuruecksetzen – siehe RESET_CSS in build-wordpress.py */
#gsb-app :where(*:not(svg, svg *, .cf7-einbettung, .cf7-einbettung *)), #gsb-app :where(*:not(svg, svg *, .cf7-einbettung, .cf7-einbettung *))::before, #gsb-app :where(*:not(svg, svg *, .cf7-einbettung, .cf7-einbettung *))::after { all: revert; }
#gsb-app {
--ink: #0d141b;
--ink-2: #18222b;
--blue: #0052e0;
--blue-dark: #0041b3;
--blue-light: #4d8dff;
--red: #e2131c;
--paper: #ffffff;
--surface: #f1f3f4;
--line: #d8dde0;
--muted: #68737c;
--container: 1280px;
--section: clamp(78px, 8vw, 124px);
}
@font-face { font-family: "Orbitron"; src: url("../fonts/orbitron-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("../fonts/michroma-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../fonts/chakra-petch-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("../fonts/chakra-petch-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("../fonts/rajdhani-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Rajdhani"; src: url("../fonts/rajdhani-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url("../fonts/bebas-neue-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("../fonts/oswald-var.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Dancing Script"; src: url("../fonts/dancing-script-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
#gsb-app, #gsb-app * { box-sizing: border-box; }
#gsb-app [hidden] { display: none !important; }
#gsb-app { scroll-behavior: smooth; }
#gsb-app { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.55; }
#gsb-app button, #gsb-app input, #gsb-app select, #gsb-app textarea { font: inherit; }
#gsb-app a { color: inherit; text-decoration: none; }
#gsb-app img { display: block; max-width: 100%; }
#gsb-app .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
#gsb-app .section { padding-block: var(--section); }
#gsb-app .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
#gsb-app .prototype-bar { height: 32px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: var(--blue); color: #fff; font-size: 11px; letter-spacing: .08em; }
#gsb-app .prototype-bar span { font-weight: 800; }
#gsb-app .prototype-bar p { margin: 0; opacity: .85; }
#gsb-app .site-header { height: 84px; padding: 0 max(24px, calc((100vw - var(--container))/2)); display: grid; grid-template-columns: 200px 1fr auto; gap: 20px; align-items: center; position: static; background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(13,20,27,.1); backdrop-filter: blur(14px); transition: box-shadow .2s; }
#gsb-app .site-header.scrolled { box-shadow: 0 8px 30px rgba(13,20,27,.08); }
#gsb-app .brand { display: inline-flex; align-items: center; width: max-content; }
#gsb-app .brand-logo { height: 42px; width: auto; display: block; }
#gsb-app .desktop-nav { display: flex; justify-content: center; gap: clamp(12px, 1.5vw, 30px); }
#gsb-app .desktop-nav a { position: relative; font-size: 14px; font-weight: 700; white-space: nowrap; }
#gsb-app .desktop-nav a::after { content: ""; position: absolute; left: 0; bottom: -9px; height: 2px; width: 0; background: var(--blue); transition: width .2s; }
#gsb-app .desktop-nav a:hover::after { width: 100%; }
#gsb-app .button { min-height: 54px; padding: 0 25px; display: inline-flex; align-items: center; justify-content: center; gap: 24px; border: 0; border-radius: 4px; background: var(--blue); color: #fff; font-weight: 800; cursor: pointer; transition: transform .18s, background .18s; }
#gsb-app .button:hover { transform: translateY(-2px); background: var(--blue-dark); }
#gsb-app .button-small { min-height: 46px; padding-inline: 20px; font-size: 14px; }
#gsb-app .button-dark { background: var(--ink); }
#gsb-app .button-dark:hover { background: #27323b; }
#gsb-app .header-ctas .button, #gsb-app a.header-cta { min-height: 44px; padding-inline: 16px; font-size: 13px; gap: 14px; white-space: nowrap; }
#gsb-app .menu-toggle, #gsb-app .mobile-nav { display: none; }
#gsb-app .eyebrow { margin: 0 0 24px; display: flex; align-items: center; gap: 11px; color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
#gsb-app .eyebrow > span { width: 34px; height: 2px; background: currentColor; }
#gsb-app h1 { margin: 0; font-size: clamp(42px, 5vw, 68px); line-height: .98; letter-spacing: -.055em; }
#gsb-app .lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--muted); max-width: 660px; }
#gsb-app .field { display: grid; gap: 8px; }
#gsb-app label { font-size: 12px; font-weight: 800; }
#gsb-app input, #gsb-app select, #gsb-app textarea { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid #b8c0c5; outline: none; background: transparent; border-radius: 0; }
#gsb-app input:focus, #gsb-app select:focus, #gsb-app textarea:focus { border-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }
@keyframes glowPulse {
0% { box-shadow: 0 0 0 0 rgba(0,82,224,.45); background: rgba(0,82,224,0); }
30% { box-shadow: 0 0 16px 6px rgba(0,82,224,.5); background: rgba(0,82,224,.08); }
100% { box-shadow: 0 0 0 0 rgba(0,82,224,0); background: rgba(0,82,224,0); }
}
#gsb-app .glow-highlight { animation: glowPulse 1.1s ease-out 2; border-radius: 6px; }
#gsb-app .configurator-page { padding-top: clamp(28px, 3vw, 44px); padding-bottom: var(--section); }
#gsb-app .configurator-intro { max-width: 660px; margin-bottom: 24px; }
#gsb-app .configurator-intro p:not(.eyebrow) { color: var(--muted); }
#gsb-app .configurator-intro .eyebrow { margin-bottom: 14px; }
#gsb-app .configurator-intro h1 { font-size: clamp(32px, 3.4vw, 46px); }
#gsb-app .configurator-intro .lead { margin-top: 10px; }
#gsb-app .ib-stage-toolbar { margin-bottom: 12px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
#gsb-app .ib-stage-toolbar .ib-toolbar-group { gap: 6px; }
#gsb-app .ib-stage-toolbar .ib-icon-btn { min-height: 38px; padding: 0 11px; gap: 6px; font-size: 12px; }
#gsb-app .ib-toolbar-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#gsb-app .eyebrow > span.beta-badge { width: auto; height: auto; padding: 3px 10px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
#gsb-app .beta-note { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 760px; }
#gsb-app .beta-note strong { color: var(--ink); }
#gsb-app .char-color-modal.send-modal { width: min(640px, 100%); }
#gsb-app .send-modal-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; color: var(--ink); }
#gsb-app .send-modal textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; resize: vertical; }
#gsb-app .send-modal-image { margin: 0 0 14px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
#gsb-app .send-modal-image img { width: 100%; height: auto; display: block; border-radius: 6px; user-select: none; -webkit-user-drag: none; }
#gsb-app .send-modal-image.is-locked img { pointer-events: none; }
#gsb-app .send-modal textarea.is-locked { user-select: none; -webkit-user-select: none; cursor: default; color: var(--muted); }
#gsb-app .send-modal-image figcaption { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
#gsb-app .configurator-request .contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
#gsb-app .configurator-request h2 { margin: 0 0 16px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.03; letter-spacing: -.045em; }
#gsb-app .configurator-request .lead { margin: 0; color: var(--muted); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; }
#gsb-app .request-design { margin: 24px 0 0; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
#gsb-app .request-design img { width: 100%; height: auto; display: block; border-radius: 6px; user-select: none; }
#gsb-app .request-design figcaption { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
#gsb-app .direct-contact { margin-top: 32px; display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--line); }
#gsb-app .direct-contact a { padding: 20px 10px 0 0; display: grid; }
#gsb-app .direct-contact small { color: var(--muted); font-size: 12px; }
#gsb-app .direct-contact b { margin-top: 4px; }
#gsb-app .quote-form { padding: 42px; display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; background: var(--surface); }
#gsb-app .anfrage-spalte { display: flex; flex-direction: column; }
#gsb-app .surface .quote-form, #gsb-app .surface .cf7-einbettung { background: var(--paper); border: 1px solid var(--line); }
#gsb-app .anfrage-spalte .quote-form, #gsb-app .anfrage-spalte .cf7-einbettung { flex: 1; }
#gsb-app .direkt-band { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 16px 42px; background: #e7effd; }
#gsb-app .direkt-band .direkt-text { color: #4a6ea8; font-size: 13px; }
#gsb-app .direkt-band a { display: inline-flex; align-items: center; gap: 9px; color: var(--blue-dark); font-weight: 800; font-size: 15px; }
#gsb-app .direkt-band a:hover { color: var(--blue); }
#gsb-app .direkt-band .direkt-sym { width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: #fff; font-size: 12px; }
#gsb-app .direkt-band .direkt-sym-wa { background: #25d366; }
#gsb-app .direkt-band .direkt-sym svg { width: 13px; height: 13px; fill: currentColor; display: block; }
#gsb-app .schritte { margin: 26px 0 0; padding: 0; list-style: none; display: grid; }
#gsb-app .schritte li { display: grid; grid-template-columns: 32px 1fr; gap: 15px; padding: 15px 0; border-top: 1px solid var(--line); }
#gsb-app .schritte li:last-child { border-bottom: 1px solid var(--line); }
#gsb-app .schritte .nr { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; }
#gsb-app .schritte b { display: block; font-size: 15px; }
#gsb-app .schritte small { color: var(--muted); font-size: 13px; line-height: 1.45; }
#gsb-app .contact-copy .form-alt { margin-top: 34px; }
#gsb-app .quote-form .field label { font-size: 13px; font-weight: 800; }
#gsb-app .quote-form input, #gsb-app .quote-form select, #gsb-app .quote-form textarea { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 14px; }
#gsb-app .quote-form input:focus, #gsb-app .quote-form select:focus, #gsb-app .quote-form textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
#gsb-app .quote-form .field-wide { grid-column: 1 / -1; }
#gsb-app .quote-form .consent { display: flex; gap: 10px; align-items: start; color: var(--muted); font-size: 12px; }
#gsb-app .quote-form .consent input { width: 18px; margin-top: 2px; }
#gsb-app .quote-form .submit-button { margin-top: 4px; }
#gsb-app .quote-form .form-message { margin: 0; min-height: 20px; color: #18704a; font-weight: 800; font-size: 13px; }
#gsb-app .quote-form .form-message[data-state="fehler"] { color: var(--red); }
@media (max-width: 1280px) {
#gsb-app .site-header { grid-template-columns: 1fr auto auto; gap: 12px; }
#gsb-app .desktop-nav { display: none; }
#gsb-app .menu-toggle { width: 48px; height: 48px; padding: 13px; display: grid; align-content: center; gap: 5px; border: 0; background: var(--ink); cursor: pointer; }
#gsb-app .menu-toggle span { height: 2px; background: #fff; }
#gsb-app .mobile-nav { padding: 28px; display: none; position: absolute; left: 0; right: 0; top: 84px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(13,20,27,.12); }
#gsb-app .mobile-nav.open { display: grid; gap: 18px; }
#gsb-app .mobile-nav a:not(.button) { font-size: 20px; font-weight: 800; }
}
@media (max-width: 1050px) {
#gsb-app .configurator-request .contact-grid { grid-template-columns: 1fr; }
#gsb-app .quote-form { grid-template-columns: 1fr; }
#gsb-app .quote-form .field-wide { grid-column: auto; }
}
#gsb-app .send-modal-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
#gsb-app .send-modal-contact .field { display: grid; gap: 6px; }
#gsb-app .send-modal-contact label { font-size: 12px; font-weight: 800; color: var(--ink); }
#gsb-app .send-modal-contact input { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 13px; }
@media (max-width: 560px) {
#gsb-app .send-modal-contact { grid-template-columns: 1fr; }
}
#gsb-app .send-modal-status { min-height: 18px; margin: 8px 0 0; }
#gsb-app .send-modal-status[data-state="ok"] { color: var(--blue); font-weight: 800; }
#gsb-app .send-modal-actions { flex-wrap: wrap; justify-content: flex-end; }
#gsb-app .ib-icon-btn { min-height: 42px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; transition: border-color .15s, color .15s, background .15s, transform .15s, box-shadow .15s; }
#gsb-app .ib-icon-btn:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,20,27,.08); }
#gsb-app .ib-icon-btn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 4px 14px rgba(0,82,224,.28); }
#gsb-app .ib-icon-btn-block { width: 100%; justify-content: center; }
#gsb-app .ib-request-meta { margin: 0 0 20px; padding: 12px 16px; display: grid; grid-template-columns: minmax(250px, 380px) minmax(250px, 380px) minmax(0, 1fr); gap: 16px; align-items: stretch; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
#gsb-app .ib-request-actions { align-self: center; justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
@media (max-width: 1100px) {
#gsb-app .ib-request-meta { grid-template-columns: 1fr 1fr; }
#gsb-app .ib-request-actions { grid-column: 1 / -1; justify-self: stretch; }
}
@media (max-width: 620px) {
#gsb-app .ib-request-meta { grid-template-columns: 1fr; }
}
#gsb-app .configurator-page .container { width: min(1600px, calc(100% - 48px)); }
#gsb-app .configurator-tool { display: grid; grid-template-columns: 300px 1fr 300px; gap: 20px; align-items: start; }
#gsb-app .ib-panel { padding: 22px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 2px 14px rgba(13,20,27,.05); }
#gsb-app .ib-panel:last-child { margin-bottom: 0; }
#gsb-app .ib-sidebar-left { min-width: 0; }
#gsb-app .ib-sidebar-left .ib-icon-btn-block { margin-top: 4px; margin-bottom: 16px; }
#gsb-app .ib-sidebar-left .ib-icon-btn-block:last-child { margin-bottom: 0; }
#gsb-app .ib-icon-btn-danger { color: var(--red); }
#gsb-app .ib-icon-btn-danger:hover { border-color: var(--red); color: var(--red); }
#gsb-app .ib-icon-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
#gsb-app .ib-stage-col { min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; position: sticky; top: calc(var(--gsb-kopf, 0px) + 20px); }
#gsb-app .ib-sidebar-right { min-width: 0; align-self: stretch; }
#gsb-app .configurator-props {
position: sticky;
top: calc(var(--gsb-kopf, 0px) + 20px);
max-height: calc(100vh - var(--gsb-kopf, 0px) - 40px);
overflow-y: auto;
}
#gsb-app .ib-tool-btn { width: 100%; min-height: 52px; margin-bottom: 8px; padding: 0 16px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 800; cursor: pointer; text-align: center; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
#gsb-app .ib-tool-btn:last-of-type { margin-bottom: 0; }
#gsb-app .ib-tool-btn:hover { border-color: var(--blue); background: rgba(0,82,224,.04); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(13,20,27,.08); }
#gsb-app .ib-tool-icon { width: 22px; flex-shrink: 0; text-align: center; font-weight: 900; color: var(--blue); }
#gsb-app .logo-library-list { display: grid; grid-template-columns: repeat(4, minmax(0, 64px)); gap: 10px; margin-top: 14px; }
#gsb-app .logo-library-item { position: relative; }
#gsb-app .logo-library-thumb { width: 100%; aspect-ratio: 1; padding: 8px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--ink); cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
#gsb-app .logo-library-thumb:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13,20,27,.1); }
#gsb-app .logo-library-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
#gsb-app .ib-panel code { padding: 1px 5px; border-radius: 3px; background: rgba(13,20,27,.08); font-family: "Courier New", monospace; font-size: 12px; }
#gsb-app .ib-template-bar { margin-bottom: 16px; }
#gsb-app .template-library-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
#gsb-app .template-card { width: 100%; padding: 10px; display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s; }
#gsb-app .template-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13,20,27,.1); }
#gsb-app .template-card-name { color: var(--ink); font-size: 13px; font-weight: 800; }
#gsb-app .template-preview { position: relative; width: 100%; aspect-ratio: 12 / 1; border-radius: 4px; background: var(--ink); overflow: hidden; }
#gsb-app .template-preview span { position: absolute; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 1.5px; color: #fff; font-size: 6px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
#gsb-app .template-preview img { height: 1.7em; width: auto; display: block; }
#gsb-app .model-picker { margin-top: 28px; }
#gsb-app .model-picker-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
#gsb-app .model-picker-card { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 10px; cursor: pointer; text-align: center; transition: border-color .15s, transform .15s, box-shadow .15s; }
#gsb-app .model-picker-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(13,20,27,.1); }
#gsb-app .model-picker-card[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue) inset; }
#gsb-app .model-picker-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 8px; background: var(--paper); }
#gsb-app .model-picker-name { display: block; margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--ink); }
#gsb-app .model-picker-subtitle { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
#gsb-app .stage-plate { width: 100%; aspect-ratio: 2101 / 522; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; touch-action: none; box-shadow: 0 16px 40px rgba(13,20,27,.1); }
#gsb-app .stage-plate.ib-preview { aspect-ratio: 1400 / 358; }
#gsb-app .stage-zoom { position: absolute; inset: 0; }
#gsb-app .stage-base { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
#gsb-app .stage-strip-color { position: absolute; left: 2.49%; right: 2.49%; bottom: 0; top: 83.12%; clip-path: polygon(1.01% 0%, 98.99% 0%, 100% 26%, 100% 92%, 98% 100%, 2% 100%, 0% 92%, 0% 26%); background-color: transparent; pointer-events: none; transition: outline-color .15s; }
#gsb-app .stage-strip-color.selected { outline: 2px dashed var(--blue); outline-offset: 4px; }
#gsb-app .stage-strip-line { position: absolute; background-color: #ffffff; pointer-events: none; z-index: 1; }
#gsb-app .stage-nonprint { position: absolute; pointer-events: none; z-index: 1; background: rgba(255,255,255,.13); border-bottom: 1px dashed rgba(255,255,255,.5); }
#gsb-app .stage-strip-color.finish-klarlack { background-image: linear-gradient(135deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 65%, rgba(255,255,255,.2) 100%); }
#gsb-app .stage-strip-color.finish-doming { background-image: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.16) 30%, rgba(255,255,255,0) 55%), radial-gradient(ellipse at 72% 90%, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 50%); box-shadow: inset 0 -10px 16px rgba(0,0,0,.22), inset 0 8px 14px rgba(255,255,255,.35); }
#gsb-app .stage-grid-overlay { position: absolute; pointer-events: none; background-image: linear-gradient(to right, rgba(0,82,224,.28) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,82,224,.28) 1px, transparent 1px); background-size: 2% 2%; }
#gsb-app .stage-guide-line { position: absolute; background: #ff2d78; pointer-events: none; z-index: 5; box-shadow: 0 0 4px rgba(255,45,120,.6); }
#gsb-app .stage-guide-line-v { top: 0; bottom: 0; width: 1px; }
#gsb-app .stage-guide-line-h { left: 0; right: 0; height: 1px; }
#gsb-app .stage-plate.ib-preview .stage-grid-overlay, #gsb-app .stage-plate.ib-preview .stage-guide-line { display: none !important; }
#gsb-app .stage-placeholder { margin: 0; position: absolute; left: 50%; top: 85%; transform: translate(-50%, -50%); color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; }
#gsb-app .stage-layer { position: absolute; inset: 0; z-index: 2; }
#gsb-app .stage-element { position: absolute; cursor: grab; touch-action: none; }
#gsb-app .stage-element:active { cursor: grabbing; }
#gsb-app .stage-element-text { cursor: ew-resize; }
#gsb-app .stage-element-text:active { cursor: ew-resize; }
#gsb-app .stage-element.selected { outline: 2px dashed var(--blue); outline-offset: 8px; }
#gsb-app .stage-element.align-selected { outline: 2px solid #ff8a00; outline-offset: 5px; }
#gsb-app .stage-element-snapped { box-shadow: 0 0 0 2px rgba(255,45,120,.85); cursor: not-allowed; }
#gsb-app .stage-element-logo { filter: drop-shadow(0 10px 16px rgba(13,20,27,.28)); }
#gsb-app .stage-element-logo-art { position: absolute; inset: 0; }
#gsb-app .stage-element-praegung { filter: drop-shadow(0 -1px 0 rgba(199,204,212,.95)) drop-shadow(0 1.5px 0 rgba(10,12,15,.6)) drop-shadow(0 4px 6px rgba(13,20,27,.4)); }
#gsb-app .stage-element-text { padding: 2px 6px; white-space: nowrap; line-height: 1; user-select: none; }
#gsb-app .stage-char-4d { display: inline-block; }
#gsb-app .stage-element-clearcoat-overlay { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; background-image: linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 65%, rgba(255,255,255,.25) 100%); }
#gsb-app .stage-element-remove { width: 28px; height: 28px; position: absolute; top: -14px; right: -14px; display: none; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--red); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 1px 5px rgba(13,20,27,.35); }
#gsb-app .stage-element.selected .stage-element-remove { display: grid; }
#gsb-app .stage-plate.ib-preview .stage-element.selected { outline: none; }
#gsb-app .stage-plate.ib-preview .stage-element-remove { display: none !important; }
#gsb-app .stage-hint { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
#gsb-app .configurator-tool.ib-preview-mode { display: flex; flex-direction: column; align-items: center; gap: 24px; }
#gsb-app .configurator-tool.ib-preview-mode .ib-stage-col { order: 1; width: 100%; }
#gsb-app .configurator-tool.ib-preview-mode .stage-hint { display: none; }
#gsb-app .configurator-tool.ib-preview-mode .ib-sidebar-right { display: none; }
#gsb-app .configurator-tool.ib-preview-mode .ib-sidebar-left { display: none; }
#gsb-app .field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#gsb-app .field-value { color: var(--blue); font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
#gsb-app .stepper { display: flex; align-items: center; gap: 12px; }
#gsb-app .stepper-btn { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 19px; font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(13,20,27,.06); transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; }
#gsb-app .stepper-btn:hover { border-color: var(--blue); color: var(--blue); box-shadow: 0 4px 12px rgba(13,20,27,.1); }
#gsb-app .stepper-btn:active { background: var(--blue); border-color: var(--blue); color: #fff; transform: scale(.94); }
#gsb-app .configurator-props input[type="range"] { -webkit-appearance: none; appearance: none; flex: 1; width: 100%; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--line); accent-color: var(--blue); cursor: pointer; }
#gsb-app .configurator-props input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: var(--line); }
#gsb-app .configurator-props input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -10px; width: 28px; height: 28px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(13,20,27,.4); cursor: pointer; }
#gsb-app .configurator-props input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: var(--line); }
#gsb-app .configurator-props input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 1px 5px rgba(13,20,27,.4); cursor: pointer; }
#gsb-app .configurator-props input[type="range"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
#gsb-app .hsb-picker { margin-top: 7px; }
#gsb-app .hsb-sb { position: relative; width: 100%; aspect-ratio: 1.6 / 1; border-radius: 9px; overflow: hidden; cursor: crosshair; touch-action: none; border: 1px solid var(--line); background-color: #ff0000; background-image: linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, rgba(255,255,255,0)); }
#gsb-app .hsb-sb-cursor { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(13,20,27,.5), 0 1px 4px rgba(13,20,27,.4); transform: translate(-50%, -50%); pointer-events: none; }
#gsb-app .hsb-hue-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; margin-top: 8px; border-radius: 999px; cursor: pointer; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
#gsb-app .char-color-modal .hsb-sb { aspect-ratio: 3.4 / 1; }
#gsb-app .hsb-hue-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 0 1px 4px rgba(13,20,27,.4); cursor: pointer; }
#gsb-app .hsb-hue-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--ink); box-shadow: 0 1px 4px rgba(13,20,27,.4); cursor: pointer; }
#gsb-app .hsb-preview-row { display: flex; align-items: center; gap: 7px; margin-top: 8px; }
#gsb-app .hsb-preview { width: 22px; height: 22px; flex-shrink: 0; border-radius: 6px; border: 1px solid var(--line); box-shadow: 0 0 0 1px rgba(13,20,27,.06) inset; }
#gsb-app .hsb-preview-row output { font-size: 12px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
#gsb-app .hsb-extra { margin-top: 10px; display: grid; gap: 6px; }
#gsb-app .hsb-hex-input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 13px; font-weight: 800; text-align: center; text-transform: uppercase; }
#gsb-app .hsb-rgb-row, #gsb-app .hsb-cmyk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
#gsb-app .hsb-cmyk-row { grid-template-columns: repeat(4, 1fr); }
#gsb-app .hsb-rgb-row input, #gsb-app .hsb-cmyk-row input { min-width: 0; padding: 6px 2px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; text-align: center; }
#gsb-app .hsb-rgb-row input::-webkit-outer-spin-button, #gsb-app .hsb-rgb-row input::-webkit-inner-spin-button, #gsb-app .hsb-cmyk-row input::-webkit-outer-spin-button, #gsb-app .hsb-cmyk-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#gsb-app .hsb-rgb-row input, #gsb-app .hsb-cmyk-row input { -moz-appearance: textfield; appearance: textfield; }
#gsb-app .hsb-extra select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font-size: 12px; }
#gsb-app .configurator-panel-title { margin: 0 0 12px; color: var(--ink); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
#gsb-app .configurator-panel-title span { color: var(--muted); font-weight: 700; text-transform: none; letter-spacing: 0; }
#gsb-app .configurator-props { display: grid; gap: 16px; align-content: start; }
#gsb-app .configurator-props input[type="text"] { padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 16px; }
#gsb-app .char-color-modal input[type="text"] { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 15px; }
#gsb-app .configurator-props input[type="text"]:focus, #gsb-app .char-color-modal input[type="text"]:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,82,224,.12); }
#gsb-app .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#gsb-app .field-stack { display: grid; gap: 16px; }
#gsb-app .color-swatches { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 4px; }
#gsb-app .color-swatch { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--line); padding: 0; cursor: pointer; box-shadow: 0 0 0 1px rgba(13,20,27,.06) inset; transition: transform .15s, border-color .15s, box-shadow .15s; }
#gsb-app .color-swatch:hover { transform: translateY(-2px); }
#gsb-app .color-swatch[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,82,224,.25); }
#gsb-app .modal-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(13,20,27,.55); backdrop-filter: blur(2px); }
#gsb-app .char-color-modal { width: min(480px, 100%); max-height: 90vh; overflow-y: auto; padding: 20px; border-radius: 16px; background: #fff; box-shadow: 0 30px 70px rgba(13,20,27,.35); }
#gsb-app .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#gsb-app .modal-header h3 { margin: 0; font-size: 15px; font-weight: 900; color: var(--ink); }
#gsb-app .modal-close { width: 28px; height: 28px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s; }
#gsb-app .modal-close:hover { border-color: var(--red); color: var(--red); }
#gsb-app .char-color-modal-text { margin: 14px 0; padding: 16px; display: flex; flex-wrap: wrap; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: var(--muted); user-select: none; touch-action: none; }
#gsb-app .char-color-modal-char { position: relative; padding: 3px 2px; border-radius: 4px; font-size: 22px; line-height: 1.2; cursor: pointer; transition: background-color .1s; }
#gsb-app .char-color-modal-char.selected { background: rgba(0,82,224,.18); box-shadow: 0 0 0 2px var(--blue); }
#gsb-app .char-color-modal-char.is-4d { filter: drop-shadow(0 -1px 0 rgba(199,204,212,.95)) drop-shadow(0 1.5px 0 rgba(10,12,15,.6)); }
#gsb-app .char-color-modal-char.is-4d::after { content: "↑"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--blue); }
#gsb-app .char-color-modal-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
#gsb-app .char-color-modal-selection-actions { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
#gsb-app .char-color-modal-selection-actions .configurator-text-btn { min-height: 36px; padding: 8px 14px; font-size: 12px; }
#gsb-app #charColorModalDone { margin-left: auto; }
#gsb-app .print-method-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#gsb-app .print-method-options .configurator-text-btn { padding: 10px 8px; font-size: 12px; text-align: center; }
#gsb-app .font-picker-name { flex: 1; min-width: 0; padding: 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 13px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: none; appearance: none; -webkit-appearance: none; cursor: pointer; }
#gsb-app .font-picker-name:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,82,224,.12); }
#gsb-app .font-picker-name option { font-size: 14px; font-weight: 400; font-style: normal; }
#gsb-app .font-picker-name optgroup { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; color: var(--muted); }
#gsb-app .font-style-toggle { display: flex; gap: 8px; margin-top: 10px; }
#gsb-app .font-style-toggle .configurator-text-btn { flex: 1; }
#gsb-app .configurator-props-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#gsb-app .configurator-props-actions .props-action-wide { grid-column: 1 / -1; }
#gsb-app .configurator-text-btn { min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 800; cursor: pointer; transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s; }
#gsb-app .configurator-text-btn:hover { border-color: var(--blue); color: var(--blue); background: rgba(0,82,224,.05); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(13,20,27,.08); }
#gsb-app .configurator-text-btn-danger { color: var(--red); }
#gsb-app .configurator-text-btn-danger:hover { border-color: var(--red); color: var(--red); background: rgba(226,19,28,.05); }
#gsb-app .configurator-text-btn[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; }
#gsb-app .configurator-text-btn:disabled { opacity: .4; cursor: not-allowed; }
#gsb-app .configurator-hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
#gsb-app .configurator-legal { margin: 14px 0 0; color: var(--muted); font-size: 12px; }
#gsb-app .site-footer { padding-top: 70px; background: #080d11; color: #fff; }
#gsb-app .footer-top { padding-bottom: 44px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); }
#gsb-app .brand-footer .brand-gsb { color: #fff; }
#gsb-app .footer-top p { color: rgba(255,255,255,.54); }
#gsb-app .footer-top-link { font-weight: 800; }
#gsb-app .footer-grid { padding: 54px 0 80px; display: grid; grid-template-columns: repeat(4,1fr); gap: 40px; }
#gsb-app .footer-grid > div { display: grid; align-content: start; gap: 10px; }
#gsb-app .footer-grid small { margin-bottom: 8px; color: var(--blue-light); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
#gsb-app .footer-grid a, #gsb-app .footer-grid span { color: rgba(255,255,255,.58); font-size: 14px; }
#gsb-app .footer-grid a:hover { color: #fff; }
#gsb-app .footer-legal { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.45); font-size: 12px; }
#gsb-app .footer-bottom { padding: 18px 0; display: flex; justify-content: space-between; color: rgba(255,255,255,.35); font-size: 10px; letter-spacing: .09em; }
#gsb-app .brand-footer { padding: 8px 16px; background: #fff; border-radius: 6px; }
#gsb-app .brand-footer .brand-logo { height: 34px; }
#gsb-app .reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s; }
#gsb-app .reveal.visible { opacity: 1; transform: none; }
@media (max-width: 1050px) {
#gsb-app .configurator-tool { grid-template-columns: 1fr; }
#gsb-app .ib-stage-col {
order: -1;
position: sticky;
top: var(--gsb-kopf, 0px);
z-index: 30;
margin-inline: calc(50% - 50vw);
padding: 10px 24px 8px;
background: rgba(255,255,255,.97);
border-bottom: 1px solid var(--line);
box-shadow: 0 10px 24px rgba(13,20,27,.08);
}
#gsb-app .ib-stage-toolbar { margin-bottom: 8px; }
#gsb-app .ib-stage-col .stage-hint { margin-top: 8px; }
#gsb-app .configurator-props { position: static; max-height: none; overflow-y: visible; }
#gsb-app .ib-sidebar-right { align-self: auto; }
}
@media (max-width: 700px) {
#gsb-app .container { width: min(100% - 32px, var(--container)); }
#gsb-app .prototype-bar { justify-content: center; }
#gsb-app .prototype-bar p { display: none; }
#gsb-app .site-header { height: 68px; padding: 0 16px; }
#gsb-app .header-cta { display: none; }
#gsb-app .mobile-nav { top: 68px; }
#gsb-app .ib-stage-toolbar { align-items: stretch; }
#gsb-app .ib-stage-col { padding: 8px 16px 6px; }
#gsb-app .ib-stage-toolbar { flex-wrap: nowrap; overflow-x: auto; padding: 6px 8px; scrollbar-width: none; }
#gsb-app .ib-stage-toolbar::-webkit-scrollbar { display: none; }
#gsb-app .ib-stage-toolbar .ib-toolbar-group { flex-wrap: nowrap; flex-shrink: 0; }
#gsb-app .ib-stage-toolbar .ib-icon-btn { white-space: nowrap; }
#gsb-app .ib-stage-col .stage-hint { display: none; }
#gsb-app .ib-panel { padding: 16px; }
#gsb-app .footer-top { grid-template-columns: 1fr auto; gap: 24px; }
#gsb-app .footer-top p { grid-column: 1 / -1; grid-row: 2; }
#gsb-app .footer-grid { grid-template-columns: repeat(2,1fr); }
#gsb-app .footer-bottom { align-items: start; flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
#gsb-app, #gsb-app *, #gsb-app *::before, #gsb-app *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
#gsb-app .reveal { opacity: 1; transform: none; }
}
#gsb-app .stepper input[type="number"] { flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 16px; font-weight: 800; text-align: center; }
#gsb-app .stepper input[type="number"]::-webkit-outer-spin-button, #gsb-app .stepper input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#gsb-app .stepper input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
#gsb-app .quantity-tier-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); gap: 8px; }
#gsb-app .quantity-tier-options .configurator-text-btn { padding: 10px 8px; font-size: 12px; text-align: center; }
#gsb-app .shape-tool-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
#gsb-app .shape-tool-options .configurator-text-btn { padding: 10px 4px; font-size: 12px; text-align: center; }
#gsb-app .ib-panel-compact { padding: 0; margin-bottom: 0; display: flex; flex-direction: column; justify-content: flex-start; background: none; border: 0; border-radius: 0; box-shadow: none; }
#gsb-app .ib-panel-compact + .ib-panel-compact { padding-left: 16px; border-left: 1px solid var(--line); }
#gsb-app .ib-panel-compact .configurator-panel-title { margin-bottom: 8px; font-size: 11px; }
#gsb-app .ib-panel-compact .configurator-text-btn { min-height: 32px; padding: 6px 8px; font-size: 11px; }
#gsb-app .ib-panel-compact .configurator-hint { margin-top: 8px; font-size: 11px; }
#gsb-app .ib-panel-compact .stepper { gap: 8px; }
#gsb-app .ib-panel-compact .stepper-btn { width: 32px; height: 32px; font-size: 16px; }
#gsb-app .ib-panel-compact .stepper input[type="number"] { padding: 5px 10px; font-size: 14px; }
#gsb-app .ib-panel-compact .quantity-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#gsb-app .ib-panel-compact .quantity-row .stepper { flex: 0 0 auto; }
#gsb-app .ib-panel-compact .quantity-row .stepper input[type="number"] { flex: 0 0 64px; width: 64px; height: 32px; padding: 0 4px; }
#gsb-app .ib-panel-compact .quantity-tier-options { flex: 1 1 190px; gap: 6px; grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)); }
#gsb-app .ib-panel-compact .quantity-tier-options .configurator-text-btn { padding: 6px 3px; }
#gsb-app .ib-panel-compact .print-method-options { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
#gsb-app .layer-list { display: grid; gap: 6px; }
#gsb-app .layer-row { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .15s, opacity .15s; }
#gsb-app .layer-row.selected { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(0,82,224,.15); }
#gsb-app .layer-row.layer-hidden { opacity: .5; }
#gsb-app .layer-row.dragging { opacity: .4; }
#gsb-app .layer-row.drag-over-top { box-shadow: inset 0 2px 0 var(--blue); }
#gsb-app .layer-row.drag-over-bottom { box-shadow: inset 0 -2px 0 var(--blue); }
#gsb-app .layer-row-handle { flex-shrink: 0; width: 18px; color: var(--muted); cursor: grab; touch-action: none; text-align: center; user-select: none; }
#gsb-app .layer-row-handle:active { cursor: grabbing; }
#gsb-app .layer-row-label { flex: 1; min-width: 0; padding: 4px 0; border: 0; background: none; color: var(--ink); font-size: 13px; font-weight: 700; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
#gsb-app .layer-icon-btn { flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 13px; line-height: 1; cursor: pointer; transition: border-color .15s; }
#gsb-app .layer-icon-btn:hover { border-color: var(--blue); }
#gsb-app .quality-toast { position: fixed; right: 24px; bottom: 24px; z-index: 300; width: min(360px, calc(100vw - 48px)); padding: 16px 40px 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(13,20,27,.22); }
#gsb-app .quality-toast ul { margin: 0; padding-left: 18px; font-size: 13px; color: var(--ink); display: grid; gap: 6px; }
#gsb-app .quality-toast .modal-close { position: absolute; top: 10px; right: 10px; }
#gsb-app #productionCheckList { margin: 14px 0; padding-left: 20px; font-size: 14px; color: var(--ink); display: grid; gap: 8px; }
@media (max-width: 700px) {
#gsb-app { --section: 56px; }
#gsb-app h1 { font-size: 36px; }
#gsb-app h2 { font-size: 32px; }
#gsb-app .lead { font-size: 16px; }
#gsb-app .button { min-height: 48px; padding: 0 20px; gap: 14px; font-size: 15px; }
#gsb-app .model-block-info h2, #gsb-app .contact-copy h2, #gsb-app .configurator-request h2, #gsb-app .referenz-galerie h2 { font-size: 26px; }
#gsb-app .configurator-intro h1 { font-size: 28px; }
}
/* Eingebettetes Anfrageformular (Contact Form 7) – siehe CF7_CSS in build-wordpress.py
Bildet die Gestaltung von .quote-form aus den Prototyp-Dateien nach: graue Flaeche, Felder
ohne Rahmen und Fuellung, nur eine Linie darunter. Zuvor stand hier eine weisse Karte mit
gerahmten Feldern – das wich vom Entwurf ab und passte nicht zur linken Spalte, die genau
fuer diese ruhige Flaeche gemacht wurde. */
#gsb-app .cf7-einbettung { padding: 42px; background: var(--surface); border: 0; }
/* Die Flaeche muss sich vom Abschnitt abheben. Auf den Werbeartikel- und Modellseiten sowie im
Konfigurator traegt der Abschnitt selbst die graue Flaeche (.surface) – dort waere ein graues
Formular unsichtbar. Es wird deshalb weiss mit feinem Rahmen, genau wie es der Entwurf fuer
diese Seiten vorsah. Auf der Startseite (weisser Abschnitt) bleibt es grau. */
#gsb-app .surface .cf7-einbettung { background: var(--paper); border: 1px solid var(--line); }
#gsb-app .cf7-einbettung p { margin: 0 0 20px; }
/* Der letzte Absatz enthaelt den Absende-Knopf. Sein Abstand nach unten kaeme zum Innenabstand
der Flaeche hinzu und liesse unter dem Knopf 62 statt 42 px stehen. */
#gsb-app .cf7-einbettung form > p:last-of-type { margin-bottom: 0; }
/* Die Beschriftungen sind im Formular-Code weiss (fuer dunkle Seitenbereiche) – auf dieser
hellen Flaeche waeren sie unsichtbar, daher !important gegen das Inline-Style. */
#gsb-app .cf7-einbettung label { display: block; margin-bottom: 8px; color: var(--ink) !important; font-size: 12px; font-weight: 800; }
#gsb-app .cf7-einbettung .row { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; }
#gsb-app .cf7-einbettung .row > * { flex: 1 1 220px; max-width: none; padding: 0; }
/* Alle Felder einheitlich: weisse Flaeche mit Rahmen. Zuvor bekamen nur Auswahlfeld und
Textfeld die Linien-Optik des Entwurfs, die Textfelder blieben gerahmt – das Formular sah
halb umgestellt aus. Da die gerahmte Fassung gewuenscht ist, gilt sie jetzt fuer alle.
Feldtypen einzeln statt input:not(...), das greift zuverlaessiger. !important, weil der
Konfigurator eine eigene Feldregel mitbringt (.quote-form input). */
#gsb-app .cf7-einbettung input[type="text"],
#gsb-app .cf7-einbettung input[type="email"],
#gsb-app .cf7-einbettung input[type="tel"],
#gsb-app .cf7-einbettung input[type="url"],
#gsb-app .cf7-einbettung input[type="number"],
#gsb-app .cf7-einbettung input[type="date"],
#gsb-app .cf7-einbettung input[type="search"],
#gsb-app .cf7-einbettung input:not([type]),
#gsb-app .cf7-einbettung select,
#gsb-app .cf7-einbettung textarea {
width: 100% !important; box-sizing: border-box; padding: 13px 15px !important;
border: 1px solid var(--line) !important; border-radius: 4px !important;
background: #fff !important; color: var(--ink); font-size: 15px; font-family: inherit;
height: auto !important;
}
/* Bewusst feste Hoehe statt min-height: die Formularflaeche wird im Raster auf die Hoehe der
linken Spalte gestreckt, und eine Textarea mit min-height waechst dabei mit. Auf der
Konfigurator-Seite (lange linke Spalte mit Entwurfsvorschau) wurde das Feld dadurch
uebermaessig hoch. Vergroessern kann der Kunde es weiterhin selbst (resize). */
#gsb-app .cf7-einbettung textarea { height: 96px !important; min-height: 0; resize: vertical; }
#gsb-app .cf7-einbettung input:focus, #gsb-app .cf7-einbettung select:focus, #gsb-app .cf7-einbettung textarea:focus { outline: none; border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(0,82,224,.12); }
/* Das Honeypot-Feld des Spamschutzes muss winzig bleiben. Es ist ein input[type="text"] und
wird von der Regel oben sonst auf volle Breite und normale Hoehe gezogen. Sein Wrapper
schneidet es zwar optisch weg (clip), aber Browser beurteilen beim automatischen Ausfuellen
die Groesse des FELDES, nicht die des Wrappers – ein 100 % breites Feld gilt ihnen als
sichtbar und wird befuellt. Der Filter wertet das als Bot und blockiert die Anfrage.
Deshalb hier ausdruecklich zurueckgesetzt. */
#gsb-app .cf7-einbettung .honeypot-wrap input,
#gsb-app .cf7-einbettung [data-cf7apps-honeypot] input,
#gsb-app .cf7-einbettung span[class*="honeypot"] input {
width: 1px !important; height: 1px !important; padding: 0 !important;
border: 0 !important; background: transparent !important; font-size: 1px !important;
}
/* Dateifelder, die der Kunde selbst bedient (z. B. "Ihr Logo in Druckqualitaet"). */
#gsb-app .cf7-einbettung input[type="file"] { width: 100%; padding: 11px 14px; border: 1px dashed #b8c0c5; border-radius: 4px; background: rgba(255,255,255,.6); font-size: 13px; }
/* Das Feld [entwurf] traegt die vom Konfigurator erzeugte PDF. Es wird per Skript befuellt und
soll vom Kunden weder gesehen noch angefasst werden – sonst steht dort ein Dateiname, den
niemand ausgewaehlt hat, und ein Knopf, der den Anhang ueberschreiben wuerde.
Bewusst NICHT display:none: ein so verstecktes Feld wird von manchen Browsern beim Absenden
uebergangen. Die Sehhilfen-Technik (1x1 Pixel, abgeschnitten) nimmt es nur optisch aus dem
Fluss, das Formular verschickt es weiterhin. */
#gsb-app .cf7-einbettung [data-name="entwurf"] {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Der leere Absatz darum wuerde sonst eine Luecke hinterlassen. */
#gsb-app .cf7-einbettung p:has([data-name="entwurf"]) { display: none; }
/* Ohne diese beiden Zeilen zoege die allgemeine Feldregel des Konfigurators Checkbox und
Absende-Knopf auf volle Breite bzw. machte den Knopf durchsichtig. */
#gsb-app .cf7-einbettung input[type="checkbox"], #gsb-app .cf7-einbettung input[type="radio"] { width: auto; padding: 0; margin: 3px 8px 0 0; border: revert; background: revert; box-shadow: none; }
/* Volle Breite wie der rote Knopf in der linken Spalte, damit beide als Paar wirken.
ACHTUNG: Steht im CF7-Formular ein eigener