/* Erzeugt aus werbeartikel-fahrzeugpflege.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 .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: 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, #gsb-app .desktop-nav a[aria-current="page"]::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-accent { background: var(--red); }
#gsb-app .button-accent:hover { background: #b80f16; }
#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 .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(46px, 5.6vw, 78px); 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: 640px; }
#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 span { color: var(--blue); }
#gsb-app .models-hero { padding-bottom: 56px; }
#gsb-app .model-catalog { padding-bottom: var(--section); }
#gsb-app .model-block { padding: 64px 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 84px); align-items: center; border-top: 1px solid var(--line); }
#gsb-app .model-block:last-child { border-bottom: 1px solid var(--line); }
#gsb-app .model-block.reverse { direction: rtl; }
#gsb-app .model-block.reverse > * { direction: ltr; }
#gsb-app .model-block-media { position: relative; display: block; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--line); overflow: hidden; }
#gsb-app .model-block-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 30px; transition: opacity .3s ease; }
#gsb-app .model-block-media img.alt { opacity: 0; }
#gsb-app .model-block-media:hover img.main { opacity: 0; }
#gsb-app .model-block-media:hover img.alt { opacity: 1; }
#gsb-app .model-block-badge { position: absolute; top: 16px; left: 16px; padding: 6px 14px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
#gsb-app .model-block-unavailable { position: absolute; top: 16px; right: 16px; padding: 6px 14px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
#gsb-app .model-block-info h2 { margin: 0 0 18px; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -.04em; }
#gsb-app .model-block-info h2 span { display: block; margin-top: 4px; font-size: .5em; font-weight: 700; letter-spacing: -.01em; color: var(--muted); text-transform: none; }
#gsb-app .model-block-desc { margin: 0 0 24px; color: var(--muted); font-size: 16px; }
#gsb-app .model-block-features { margin: 0 0 26px; padding: 0; list-style: none; display: grid; gap: 10px; }
#gsb-app .model-block-features li { padding-left: 20px; position: relative; font-size: 14px; }
#gsb-app .model-block-features li::before { content: ""; width: 6px; height: 6px; position: absolute; left: 0; top: 7px; background: var(--blue); border-radius: 50%; }
#gsb-app .model-block-tags { margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
#gsb-app .model-block-tags span { padding: 7px 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#gsb-app .model-block-actions { display: flex; flex-wrap: wrap; gap: 12px; }
#gsb-app .model-block-actions .button { gap: 12px; padding: 0 16px; font-size: 14px; }
#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[aria-current="page"], #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: 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 .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; }
#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 h2 { margin: 0 0 18px; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.02; letter-spacing: -.04em; }
#gsb-app .contact-copy .lead { margin: 0; color: var(--muted); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; }
#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: #fff; border: 1px solid var(--line); }
#gsb-app .field { display: grid; gap: 8px; }
#gsb-app .field label { font-size: 13px; font-weight: 800; }
#gsb-app .field input, #gsb-app .field select, #gsb-app .field textarea { padding: 13px 14px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); }
#gsb-app .field input:focus, #gsb-app .field select:focus, #gsb-app .field textarea:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
#gsb-app .field-wide { grid-column: 1 / -1; }
#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; }
@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 .contact-grid { grid-template-columns: 1fr; gap: 45px; }
#gsb-app .contact .form-alt { padding-bottom: 22px; }
#gsb-app .direct-contact { grid-template-columns: 1fr; }
#gsb-app .model-block { grid-template-columns: 1fr; }
#gsb-app .model-block.reverse { direction: ltr; }
}
@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-ctas { display: none; }
#gsb-app .mobile-nav { top: 68px; }
#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; }
#gsb-app .quote-form { padding: 26px 20px; grid-template-columns: 1fr; }
#gsb-app .field-wide { grid-column: auto; }
}
@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 .artikel-media-leer { display: grid; place-items: center; gap: 8px; text-align: center; padding: 24px; }
#gsb-app .artikel-media-leer strong { font-size: clamp(28px, 3vw, 44px); letter-spacing: -.03em; color: var(--line); }
#gsb-app .artikel-media-leer small { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
#gsb-app .model-block-count { margin: 0 0 18px; color: var(--blue); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
#gsb-app .produkt-anzahl { margin: 18px 0 0; color: var(--blue); font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
#gsb-app .produkt-hinweis { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
#gsb-app .produkt-katalog { padding-bottom: var(--section); }
#gsb-app .produkt-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
#gsb-app .produkt-kachel { min-width: 0; padding: 16px; display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--line); transition: transform .2s, box-shadow .2s, border-color .2s; }
#gsb-app .produkt-kachel:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 16px 34px rgba(13,20,27,.1); }
#gsb-app .produkt-bild { position: relative; margin-bottom: 12px; background: #fff; }
#gsb-app .produkt-kachel img { width: 100%; height: 190px; object-fit: contain; display: block; }
#gsb-app .produkt-pfeil { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s, border-color .15s; }
#gsb-app .produkt-pfeil.zurueck { left: 6px; }
#gsb-app .produkt-pfeil.vor { right: 6px; }
#gsb-app .produkt-kachel:hover .produkt-pfeil, #gsb-app .produkt-pfeil:focus-visible { opacity: 1; }
#gsb-app .produkt-pfeil:hover { border-color: var(--blue); color: var(--blue); }
#gsb-app .produkt-punkte { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 5px; }
#gsb-app .produkt-punkte i { width: 6px; height: 6px; border-radius: 50%; background: rgba(13,20,27,.25); }
#gsb-app .produkt-punkte i.aktiv { background: var(--blue); }
@media (hover: none) {
#gsb-app .produkt-pfeil { opacity: 1; }
}
#gsb-app .produkt-kachel h3 { margin: 0; font-size: 15px; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: break-word; hyphens: auto; }
#gsb-app .produkt-kachel small { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; overflow-wrap: break-word; }
#gsb-app .produkt-anfrage { margin-top: auto; padding: 11px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--blue); border-radius: 7px; color: #fff; font-size: 13px; font-weight: 800; text-align: center; transition: background .15s, transform .15s; }
#gsb-app .produkt-anfrage span { color: #fff; }
#gsb-app .produkt-anfrage:hover { background: var(--red); transform: translateY(-1px); }
#gsb-app .produkt-kachel > :nth-last-child(2) { margin-bottom: 6px; }
@media (max-width: 700px) {
#gsb-app .produkt-raster { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#gsb-app .produkt-kachel img { height: 140px; }
}
#gsb-app .produkt-kachel h3 { margin-top: 0; }
#gsb-app .referenz-galerie h2 { margin: 0 0 14px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.03; letter-spacing: -.045em; }
#gsb-app .referenz-galerie .lead { margin: 0 0 34px; max-width: 620px; }
#gsb-app .referenz-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
#gsb-app .referenz-raster img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--ink); border: 1px solid var(--line); }
@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; }
}
/* 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