/* Erzeugt aus GSB-PLAST_Homepage.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);
}
#gsb-app, #gsb-app * { box-sizing: border-box; }
#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 .surface { background: var(--surface); }
#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 .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: sticky; top: 0; z-index: 50; 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 .button-accent { background: var(--red); }
#gsb-app .button-accent:hover { background: #b80f16; }
#gsb-app .button-light { background: #fff; color: var(--ink); }
#gsb-app .button-light:hover { background: #eef0f1; }
#gsb-app .header-ctas { display: flex; align-items: center; gap: 10px; }
#gsb-app .header-ctas .button { 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 .hero { min-height: calc(100vh - 84px); padding-bottom: 116px; position: relative; overflow: hidden; color: #fff; background: #080d12 url("../media/hero-druckvorgang-poster.jpg") center/cover no-repeat; }
#gsb-app .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) brightness(.9); z-index: 0; pointer-events: none; }
#gsb-app .hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(8,13,18,.97) 0%, rgba(8,13,18,.88) 46%, rgba(8,13,18,.42) 100%); }
#gsb-app .hero-grid { position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 88px 88px; mask-image: linear-gradient(to right, black, transparent 78%); }
#gsb-app .hero-content { min-height: calc(100vh - 84px - 116px); padding: 48px 0; position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
#gsb-app .hero-copy { max-width: 850px; }
#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 .eyebrow-light { color: var(--blue-light); }
#gsb-app .hero h1 { margin: 0; font-size: clamp(54px, 6.35vw, 96px); line-height: .91; letter-spacing: -.065em; font-weight: 900; }
#gsb-app .hero h1 em { color: var(--blue-light); font-style: normal; }
#gsb-app .hero-lead { max-width: 670px; margin: 34px 0; color: rgba(255,255,255,.82); font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; }
#gsb-app .hero-actions { display: flex; align-items: center; gap: 34px; }
#gsb-app .text-link { display: inline-flex; align-items: center; gap: 18px; padding: 9px 0; border-bottom: 1px solid currentColor; font-weight: 800; }
#gsb-app .text-link-light { color: #fff; border-color: rgba(255,255,255,.4); }
#gsb-app .text-link span { color: var(--blue); }
#gsb-app .text-link-light span { color: var(--blue-light); }
#gsb-app .hero-index { display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(255,255,255,.5); }
#gsb-app .hero-index strong { font-size: 18px; color: #fff; }
#gsb-app .hero-index span { width: 1px; height: 120px; background: linear-gradient(var(--blue-light) 33%, rgba(255,255,255,.22) 33%); }
#gsb-app .hero-index small { font-weight: 800; }
#gsb-app .hero-trust { min-height: 116px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; background: rgba(8,13,18,.9); border-top: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); }
#gsb-app .trust-grid { min-height: 116px; display: grid; grid-template-columns: repeat(3,1fr); }
#gsb-app .trust-grid > div { display: flex; align-items: center; gap: 20px; padding: 0 32px; border-right: 1px solid rgba(255,255,255,.13); }
#gsb-app .trust-grid > div:first-child { padding-left: 0; }
#gsb-app .trust-grid strong { color: var(--blue-light); font-size: 12px; }
#gsb-app .trust-grid p { display: grid; margin: 0; }
#gsb-app .trust-grid b { font-size: 14px; }
#gsb-app .trust-grid span { color: rgba(255,255,255,.45); font-size: 12px; }
#gsb-app .intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(48px, 8vw, 130px); }
#gsb-app h2 { margin: 0; font-size: clamp(42px, 5vw, 70px); line-height: 1.01; letter-spacing: -.055em; }
#gsb-app h2 em { color: var(--blue); font-style: normal; }
#gsb-app .lead { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.5; }
#gsb-app .intro-copy p:not(.lead) { color: var(--muted); }
#gsb-app .intro-copy .text-link { margin-top: 18px; }
#gsb-app .intro-figure { margin: clamp(40px, 5vw, 66px) 0 0; position: relative; overflow: hidden; }
#gsb-app .intro-figure img { width: 100%; height: clamp(280px, 42vw, 560px); object-fit: cover; }
#gsb-app .intro-figure figcaption { position: absolute; left: 0; bottom: 0; padding: 16px 22px; background: linear-gradient(transparent, rgba(8,13,18,.82)); color: #fff; font-size: 13px; font-weight: 700; width: 100%; }
#gsb-app .section-heading { margin-bottom: 54px; display: grid; grid-template-columns: 1.35fr .65fr; gap: 70px; align-items: end; }
#gsb-app .section-heading > p { max-width: 480px; color: var(--muted); font-size: 18px; }
#gsb-app .models-heading { margin-bottom: 24px; }
#gsb-app .model-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
#gsb-app .model-grid::-webkit-scrollbar { display: none; }
#gsb-app .model-card { flex: 0 0 auto; width: calc((100% - 3 * 16px) / 4); scroll-snap-align: start; min-height: 460px; padding: 26px; display: flex; flex-direction: column; position: relative; overflow: hidden; background: #fff; border: 1px solid #e1e5e7; transition: transform .22s, box-shadow .22s; }
#gsb-app .model-carousel-nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
#gsb-app .carousel-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 19px; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s, transform .15s, opacity .15s; }
#gsb-app .carousel-btn:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }
#gsb-app .model-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(13,20,27,.1); }
#gsb-app .model-card.featured { background: var(--ink); color: #fff; }
#gsb-app .model-card img { height: 205px; width: 100%; margin: 12px 0 20px; object-fit: contain; }
#gsb-app .model-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
#gsb-app .featured .model-meta { color: rgba(255,255,255,.45); }
#gsb-app .model-card h3 { margin: auto 0 12px; font-size: 30px; letter-spacing: -.04em; }
#gsb-app .card-link { margin-top: 15px; padding: 13px 16px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--blue); border-radius: 7px; color: #fff; font-size: 14px; font-weight: 800; text-align: center; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
#gsb-app .card-link span { color: #fff; }
#gsb-app .card-link:hover { background: var(--red); transform: translateY(-1px); }
#gsb-app .all-models { margin-top: 36px; }
#gsb-app .models-link-top { margin: 0 0 24px; }
#gsb-app .werbeartikel { background: var(--surface); }
#gsb-app .artikel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
#gsb-app .artikel-card { min-width: 0; padding: 22px; display: grid; gap: 4px; background: #fff; border: 1px solid var(--line); transition: transform .22s, box-shadow .22s, border-color .22s; }
#gsb-app .artikel-card:hover { transform: translateY(-6px); border-color: var(--blue); box-shadow: 0 22px 50px rgba(13,20,27,.1); }
#gsb-app .artikel-card img, #gsb-app .artikel-card-leer { height: 150px; width: 100%; margin-bottom: 14px; object-fit: contain; background: #fff; }
#gsb-app .artikel-card-leer { display: grid; place-items: center; background: var(--surface); }
#gsb-app .artikel-card-leer strong { color: var(--line); font-size: 58px; line-height: 1; }
#gsb-app .artikel-card h3 { margin: 0; font-size: 18px; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
#gsb-app .artikel-card small { color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: break-word; }
#gsb-app .artikel-band { overflow: hidden; padding: 8px 0 24px; margin: -8px 0 -24px; touch-action: pan-y; }
#gsb-app .artikel-band .artikel-grid { display: flex; gap: 20px; transition: transform .7s cubic-bezier(.45, 0, .2, 1); will-change: transform; }
#gsb-app .artikel-band .artikel-card { flex: 0 0 auto; width: calc((100% - 3 * 20px) / 4); padding: 26px; }
#gsb-app .artikel-band .artikel-card img { height: 220px; }
#gsb-app .artikel-band .artikel-card h3 { font-size: 21px; }
#gsb-app .artikel-band .artikel-card small { font-size: 13px; }
@media (max-width: 1050px) {
#gsb-app .artikel-band .artikel-card { width: calc((100% - 20px) / 2); }
}
@media (max-width: 620px) {
#gsb-app .artikel-band .artikel-grid { gap: 12px; }
#gsb-app .artikel-band .artikel-card { width: 72%; padding: 16px; }
#gsb-app .artikel-band .artikel-card img { height: 160px; margin-bottom: 10px; }
#gsb-app .artikel-band .artikel-card h3 { font-size: 17px; }
#gsb-app .artikel-band .artikel-card small { font-size: 12px; }
}
#gsb-app .production { background: var(--ink); color: #fff; }
#gsb-app .production-heading > p { color: rgba(255,255,255,.58); }
#gsb-app .production-stage { display: grid; grid-template-columns: 1.45fr .55fr; min-height: 660px; border: 1px solid rgba(255,255,255,.14); }
#gsb-app .production-visual { min-height: 650px; position: relative; overflow: hidden; background: #0a0f14; }
#gsb-app .visual-media { position: absolute; inset: 0; z-index: 0; }
#gsb-app .visual-media img, #gsb-app .visual-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
#gsb-app .visual-media img[hidden], #gsb-app .visual-media video[hidden] { display: none !important; }
#gsb-app .visual-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(5,8,10,.94), rgba(5,8,10,.28) 58%, rgba(5,8,10,.55)); }
#gsb-app .machine-frame { position: absolute; inset: 60px; z-index: 2; padding: 42px; display: flex; flex-direction: column; justify-content: flex-end; }
#gsb-app .machine-frame strong { max-width: 600px; margin-top: 22px; font-size: clamp(40px, 4.4vw, 66px); line-height: .95; letter-spacing: -.06em; }
#gsb-app .machine-frame small { max-width: 520px; margin-top: 22px; color: rgba(255,255,255,.72); }
#gsb-app .production-badge { width: 120px; height: 120px; position: absolute; right: 0; top: 0; z-index: 2; display: grid; place-content: center; background: var(--blue); text-align: center; }
#gsb-app .production-badge b { font-size: 12px; letter-spacing: .15em; }
#gsb-app .production-badge span { font-size: 10px; }
#gsb-app .process-list { margin: 0; padding: 0; list-style: none; }
#gsb-app .process-list li { min-height: 132px; padding: 24px 28px; display: grid; grid-template-columns: 40px 1fr; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.48); cursor: pointer; transition: background .2s, color .2s; }
#gsb-app .process-list li.active, #gsb-app .process-list li:hover { background: var(--blue); color: #fff; }
#gsb-app .process-list li > span { font-size: 11px; font-weight: 900; }
#gsb-app .process-list h3 { margin: 0; font-size: 21px; }
#gsb-app .process-list li[data-media="video"] h3::after { content: "Video"; margin-left: 10px; padding: 3px 9px; border-radius: 20px; background: rgba(255,255,255,.16); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; vertical-align: middle; }
#gsb-app .process-list li[data-media="video"]:not(.active):not(:hover) h3::after { background: rgba(77,141,255,.18); color: var(--blue-light); }
#gsb-app .process-list p { margin: 4px 0 0; font-size: 13px; }
#gsb-app .production-note { margin: 22px 0 0; color: rgba(255,255,255,.5); font-size: 13px; }
#gsb-app .capability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 44px; }
#gsb-app .capability-grid figure { margin: 0; position: relative; overflow: hidden; border: 1px solid var(--line); }
#gsb-app .capability-grid img { width: 100%; height: clamp(300px, 34vw, 420px); object-fit: cover; transition: transform .5s ease; }
#gsb-app .capability-grid figure:hover img { transform: scale(1.045); }
#gsb-app .capability-grid figcaption { position: absolute; left: 0; bottom: 0; width: 100%; padding: 20px 24px; display: grid; gap: 3px; background: linear-gradient(transparent, rgba(8,13,18,.9)); color: #fff; }
#gsb-app .capability-grid figcaption b { font-size: 19px; letter-spacing: -.02em; }
#gsb-app .capability-grid figcaption span { color: rgba(255,255,255,.7); font-size: 13px; }
#gsb-app .brand-value { overflow: hidden; }
#gsb-app .value-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 70px; }
#gsb-app .value-copy .lead { color: var(--muted); }
#gsb-app .value-points { margin: 30px 0 36px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
#gsb-app .value-points span { padding-top: 16px; border-top: 2px solid var(--ink); font-size: 12px; font-weight: 800; }
#gsb-app .value-product { padding: 24px clamp(26px, 3vw, 48px); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(22px, 2.6vw, 34px); background: var(--surface); background-image: radial-gradient(circle at 78% 8%, rgba(0,82,224,.09), transparent 60%); border: 1px solid var(--line); }
#gsb-app .value-product-label { width: 90%; align-self: center; color: var(--blue); font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
#gsb-app .plate-stack { display: grid; gap: clamp(20px, 2.6vw, 34px); }
#gsb-app .plate-stack img { display: block; width: 100%; height: auto; filter: drop-shadow(0 14px 20px rgba(13,20,27,.22)); }
#gsb-app .plate-card { width: 90%; margin: 0 auto; }
#gsb-app .plate-card figcaption { margin-top: 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
#gsb-app .plate-card figcaption b { font-size: 15px; letter-spacing: -.01em; }
#gsb-app .plate-card figcaption span { color: var(--muted); font-size: 12px; font-weight: 700; }
#gsb-app .value-product-note { margin: 0; color: var(--muted); font-size: 12px; }
#gsb-app .print-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
#gsb-app .print-card { min-height: 460px; padding: 0 0 28px; display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; overflow: hidden; transition: transform .22s, box-shadow .22s; }
#gsb-app .print-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(13,20,27,.1); }
#gsb-app .print-photo { height: 210px; overflow: hidden; }
#gsb-app .print-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
#gsb-app .print-card:hover .print-photo img { transform: scale(1.05); }
#gsb-app .card-count { margin: 22px 28px 0; color: var(--blue); font-size: 11px; font-weight: 900; }
#gsb-app .print-card h3 { margin: 12px 28px 8px; font-size: 28px; overflow-wrap: break-word; hyphens: auto; }
#gsb-app .print-card p { margin: 0 28px; color: var(--muted); font-size: 14px; }
#gsb-app .configurator-cta { margin-top: 56px; padding-top: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; border-top: 1px solid var(--line); }
#gsb-app .configurator-cta p { margin: 0; max-width: 460px; color: var(--muted); font-size: 16px; }
#gsb-app .reference-wall { min-height: 560px; display: grid; grid-template-columns: .82fr 1.18fr; overflow: hidden; background: #1b242b; color: #fff; }
#gsb-app .wall-copy { align-self: center; padding: clamp(32px, 4vw, 60px); }
#gsb-app .wall-copy > span { color: var(--blue-light); font-size: 11px; font-weight: 900; letter-spacing: .13em; }
#gsb-app .wall-copy strong { display: block; margin: 18px 0; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.04em; }
#gsb-app .wall-copy small { color: rgba(255,255,255,.55); }
#gsb-app .wall-copy .text-link { margin-top: 26px; }
#gsb-app .wall-photo { position: relative; overflow: hidden; }
#gsb-app .wall-photo img { width: 100%; height: 100%; object-fit: cover; }
#gsb-app .reference-caption { padding: 22px 0; display: flex; gap: 14px; border-bottom: 1px solid var(--line); }
#gsb-app .reference-caption span { color: var(--muted); }
#gsb-app .cta-band { position: relative; min-height: 380px; display: grid; place-items: center; text-align: center; color: #fff; background: #0a0f14; overflow: hidden; }
#gsb-app .cta-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.4) saturate(.9); z-index: 0; }
#gsb-app .cta-band .container { position: relative; z-index: 1; padding-block: 70px; }
#gsb-app .cta-band .eyebrow { justify-content: center; }
#gsb-app .cta-band h2 { color: #fff; }
#gsb-app .cta-band p { max-width: 620px; margin: 18px auto 30px; color: rgba(255,255,255,.82); font-size: 18px; }
#gsb-app .cta-band .hero-actions { justify-content: center; }
#gsb-app .workflow { background: var(--ink); color: #fff; }
#gsb-app .workflow-title { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
#gsb-app .workflow-list { margin: 70px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5,1fr); list-style: none; }
#gsb-app .workflow-list li { padding: 0 26px 0 0; position: relative; }
#gsb-app .workflow-list li:not(:last-child)::after { content: "→"; position: absolute; top: 13px; right: 4px; color: rgba(255,255,255,.28); font-size: 20px; }
#gsb-app .workflow-list span { width: 44px; height: 44px; margin-bottom: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(255,255,255,.06); color: var(--blue-light); font-size: 14px; font-weight: 900; }
#gsb-app .workflow-list h3 { margin: 0 0 10px; font-size: 23px; }
#gsb-app .workflow-list p { color: rgba(255,255,255,.5); font-size: 14px; }
#gsb-app .contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 90px; }
#gsb-app .contact-copy { display: flex; flex-direction: column; }
#gsb-app .contact-copy .lead { color: var(--muted); }
#gsb-app .direct-contact { margin-top: 48px; display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--line); }
#gsb-app .direct-contact a { padding: 24px 10px 0 0; display: grid; }
#gsb-app .direct-contact small { color: var(--muted); }
#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 .field { display: grid; gap: 8px; }
#gsb-app .field-wide { grid-column: 1 / -1; }
#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); }
#gsb-app .consent { display: flex; gap: 10px; align-items: start; color: var(--muted); font-size: 12px; }
#gsb-app .consent input { width: 18px; margin-top: 2px; }
#gsb-app .submit-button { margin-top: 6px; }
#gsb-app .form-message { margin: 0; color: #18704a; font-weight: 800; }
#gsb-app .form-alt { margin-top: auto; padding-top: 20px; display: grid; gap: 12px; border-top: 1px solid var(--line); color: var(--ink); font-size: 14px; font-weight: 800; }
#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 { padding: 8px 16px; background: #fff; border-radius: 6px; }
#gsb-app .brand-footer .brand-logo { height: 34px; }
#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-bottom { padding: 18px 0; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.35); font-size: 10px; letter-spacing: .09em; }
#gsb-app #anfrage { scroll-margin-top: 96px; }
#gsb-app .contact.section { padding-block: clamp(52px, 4.5vw, 78px); }
#gsb-app .contact .quote-form { padding: clamp(20px, 2.4vw, 30px); gap: 16px; }
#gsb-app .contact .direct-contact { margin-top: 30px; }
#gsb-app .contact .form-alt { margin-top: auto; padding-top: 22px; padding-bottom: 46px; }
#gsb-app .reveal { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .5s; }
#gsb-app .reveal.visible { opacity: 1; transform: none; }
@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 .print-grid { grid-template-columns: repeat(2,1fr); }
#gsb-app .model-card { width: calc((100% - 16px) / 2); }
#gsb-app .production-stage { grid-template-columns: 1fr; }
#gsb-app .process-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
#gsb-app .process-list li { min-height: 170px; padding: 20px 14px; grid-template-columns: 1fr; }
#gsb-app .process-list h3 { font-size: 17px; overflow-wrap: break-word; }
#gsb-app .process-list li[data-media="video"] h3::after { display: block; width: fit-content; margin: 8px 0 0; }
#gsb-app .capability-grid img { height: auto; aspect-ratio: 3 / 2; }
#gsb-app .print-photo { height: auto; aspect-ratio: 306 / 210; }
#gsb-app .hero { min-height: 680px; }
#gsb-app .hero-content { min-height: 564px; }
#gsb-app .value-grid, #gsb-app .contact-grid { grid-template-columns: 1fr; }
#gsb-app .contact .form-alt { padding-bottom: 22px; }
#gsb-app .reference-wall { grid-template-columns: 1fr; }
#gsb-app .wall-photo { min-height: 340px; }
}
@media (max-width: 700px) {
#gsb-app .container { width: min(100% - 32px, var(--container)); }
#gsb-app .site-header { height: 68px; padding: 0 16px; }
#gsb-app .header-ctas { display: none; }
#gsb-app .mobile-nav { top: 68px; }
#gsb-app .hero { min-height: 790px; }
#gsb-app .hero-content { min-height: 670px; padding: 68px 0 150px; align-items: start; }
#gsb-app .hero-copy { width: 100%; }
#gsb-app .hero h1 { font-size: clamp(40px, 12.5vw, 66px); }
#gsb-app .hero-lead { margin: 28px 0; font-size: 18px; }
#gsb-app .hero-actions { align-items: stretch; flex-direction: column; gap: 14px; }
#gsb-app .hero-actions .button { width: 100%; }
#gsb-app .hero-actions .text-link { align-self: flex-start; }
#gsb-app .hero-index { display: none; }
#gsb-app .hero-trust { min-height: 120px; }
#gsb-app .trust-grid { min-height: 120px; }
#gsb-app .trust-grid > div { padding: 14px 10px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
#gsb-app .trust-grid > div:first-child { padding-left: 0; }
#gsb-app .trust-grid > div:last-child { border-right: 0; }
#gsb-app .trust-grid b { font-size: 12.5px; line-height: 1.25; }
#gsb-app .trust-grid span { font-size: 11px; line-height: 1.3; }
#gsb-app .intro-grid, #gsb-app .section-heading { grid-template-columns: 1fr; gap: 28px; }
#gsb-app h2 { font-size: 42px; }
#gsb-app .section-heading { margin-bottom: 40px; }
#gsb-app .model-grid { margin-right: -16px; padding-right: 16px; }
#gsb-app .model-card { width: 84vw; }
#gsb-app .model-carousel-nav { display: none; }
#gsb-app .production-stage { min-height: 0; }
#gsb-app .production-visual { min-height: 520px; }
#gsb-app .machine-frame { inset: 24px; padding: 28px; }
#gsb-app .machine-frame strong { font-size: 44px; }
#gsb-app .process-list { display: block; }
#gsb-app .process-list li { min-height: 0; grid-template-columns: 38px 1fr; }
#gsb-app .value-grid { gap: 45px; }
#gsb-app .capability-grid { grid-template-columns: 1fr; }
#gsb-app .capability-grid img { aspect-ratio: auto; height: 320px; }
#gsb-app .wall-photo { min-height: 0; margin: 0; }
#gsb-app .wall-photo img { height: auto; }
#gsb-app .value-points { grid-template-columns: 1fr; }
#gsb-app .value-product { min-height: 390px; }
#gsb-app .print-grid { grid-template-columns: 1fr; }
#gsb-app .print-card { min-height: 0; }
#gsb-app .configurator-cta { margin-top: 40px; padding-top: 32px; flex-direction: column; align-items: start; }
#gsb-app .workflow-title { align-items: start; flex-direction: column; }
#gsb-app .workflow-list { grid-template-columns: 1fr; gap: 30px; }
#gsb-app .workflow-list li { padding: 0; }
#gsb-app .workflow-list li:not(:last-child)::after { display: none; }
#gsb-app .workflow-list h3 { margin: 0 0 6px; }
#gsb-app .contact-grid { gap: 45px; }
#gsb-app .direct-contact { grid-template-columns: 1fr; }
#gsb-app .quote-form { padding: 26px 20px; grid-template-columns: 1fr; }
#gsb-app .field-wide { grid-column: auto; }
#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; }
}
@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 .hero { min-height: 720px; }
#gsb-app .hero-content { min-height: 600px; padding: 56px 0 140px; }
#gsb-app .hero h1 { font-size: clamp(34px, 10.5vw, 48px); }
#gsb-app .hero-lead { margin: 22px 0; font-size: 16px; }
#gsb-app .model-card h3 { font-size: 24px; }
#gsb-app .print-card h3 { font-size: 22px; }
#gsb-app .wall-copy strong { font-size: 22px; }
#gsb-app .machine-frame strong { font-size: 34px; }
}
/* 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