/** * GF Material Design – Material Design 3 Styles für Gravity Forms * * Unterstützt: * - Gravity Forms 2.5+ (modern markup, .gravity-theme) * - Gravity Forms 2.7+ (Theme Framework, .gform-theme) * - Filled und Outlined Text Field Varianten * * CSS Custom Properties werden vom Plugin im injiziert * und können über die Plugin-Einstellungen angepasst werden. */ /* ========================================================================== 0. Font – wird per PHP bedingt als Google Font oder als inherit geladen ========================================================================== */ /* ========================================================================== 1. Gravity Forms Theme Framework Overrides (Nicht-Farb-Overrides) -------------------------------------------------------------------------- Farb-Variablen (--gf-color-primary, --gf-ctrl-border-color etc.) werden vom Plugin per PHP im mit !important injiziert, um GF Orbital Theme's Inline-Styles mit ID-Selektoren zu überschreiben. Hier verbleiben nur strukturelle Overrides. ========================================================================== */ .gform_wrapper.gform-theme--framework, .gform_wrapper.gform-theme, .gform_wrapper.gravity-theme { --gf-ctrl-bg-color: transparent; } /* ========================================================================== 2. Base – Typografie & Wrapper ========================================================================== */ .gform_wrapper { font-family: var(--gf-md-font-family, inherit); font-size: 16px; line-height: 1.5; color: var(--gf-md-on-surface, #1C1B1F); } .gform_wrapper * { box-sizing: border-box; } /* ========================================================================== 3. Labels (Standard – nicht-floating) ========================================================================== */ .gform_wrapper .gfield_label, .gform_wrapper .gform-field-label { font-family: var(--gf-md-font-family, inherit); font-size: 12px; font-weight: 400; line-height: 1.334; letter-spacing: 0.4px; color: var(--gf-md-on-surface-variant, #79747E); margin-bottom: 4px; transition: color 0.2s cubic-bezier(0.2, 0, 0, 1); } .gform_wrapper .gfield:focus-within .gfield_label, .gform_wrapper .gfield:focus-within .gform-field-label { color: var(--gf-md-primary, #6750A4); } .gform_wrapper .gfield_required { color: var(--gf-md-error, #B3261E); } /* Sub-Labels (complex fields) */ .gform_wrapper .ginput_complex label, .gform_wrapper .gform-field-label--type-sub { font-size: 12px; font-weight: 400; letter-spacing: 0.4px; color: var(--gf-md-on-surface-variant, #79747E); margin-top: 4px; } /* ========================================================================== 3b. Floating Labels -------------------------------------------------------------------------- Nutzt CSS :has() um vom .gfield-Element aus den Zustand des Inputs zu erkennen. Das Label bleibt im DOM vor dem Input (GF-Standard). ========================================================================== */ /* --- Grundposition: Label absolut über dem Input positionieren --- */ .gform_wrapper .gfield.gf-md-floating { position: relative; /* GF Theme Framework: feste Höhen-Variable überschreiben */ --gf-ctrl-size: auto; } /* --- Description above: move below input so floating label aligns correctly --- */ .gform_wrapper .gfield.gf-md-floating.field_description_above { display: flex; flex-direction: column; } .gform_wrapper .gfield.gf-md-floating.field_description_above > .gfield_description { order: 10; margin-top: 4px; margin-bottom: 0; } .gform_wrapper .gfield.gf-md-floating > .gfield_label, .gform_wrapper .gfield.gf-md-floating > .gform-field-label, .gform_wrapper.gform-theme .gfield.gf-md-floating > .gfield_label, .gform_wrapper.gform-theme .gfield.gf-md-floating > .gform-field-label { position: absolute !important; top: 18px !important; left: 16px; z-index: 1; margin: 0 !important; padding: 0 !important; font-size: 16px !important; font-weight: 400; line-height: 1.5; letter-spacing: 0.5px !important; color: var(--gf-md-on-surface-variant, #79747E); pointer-events: none; transform-origin: top left; transition: top 0.2s cubic-bezier(0.2, 0, 0, 1), font-size 0.2s cubic-bezier(0.2, 0, 0, 1), color 0.2s cubic-bezier(0.2, 0, 0, 1), letter-spacing 0.2s cubic-bezier(0.2, 0, 0, 1); } /* --- Schwebend (klein): Focus-Zustand --- */ .gform_wrapper .gfield.gf-md-floating:has(.ginput_container input:focus) > .gfield_label, .gform_wrapper .gfield.gf-md-floating:has(.ginput_container textarea:focus) > .gfield_label, .gform_wrapper .gfield.gf-md-floating:has(.ginput_container select:focus) > .gfield_label, .gform_wrapper .gfield.gf-md-floating:has(.ginput_container input:focus) > .gform-field-label, .gform_wrapper .gfield.gf-md-floating:has(.ginput_container textarea:focus) > .gform-field-label, .gform_wrapper .gfield.gf-md-floating:has(.ginput_container select:focus) > .gform-field-label { top: 6px !important; font-size: 12px !important; letter-spacing: 0.4px !important; color: var(--gf-md-primary, #6750A4); } /* --- Schwebend (klein): Gefüllter Zustand (Input hat Wert) --- */ .gform_wrapper .gfield.gf-md-floating:has(.ginput_container input:not(:placeholder-shown)) > .gfield_label, .gform_wrapper .gfield.gf-md-floating:has(.ginput_container textarea:not(:placeholder-shown)) > .gfield_label, .gform_wrapper .gfield.gf-md-floating:has(.ginput_container input:not(:placeholder-shown)) > .gform-field-label, .gform_wrapper .gfield.gf-md-floating:has(.ginput_container textarea:not(:placeholder-shown)) > .gform-field-label { top: 6px !important; font-size: 12px !important; letter-spacing: 0.4px !important; } /* --- Select-Felder: Label immer in der kleinen Position --- */ .gform_wrapper .gfield.gf-md-floating--select > .gfield_label, .gform_wrapper .gfield.gf-md-floating--select > .gform-field-label { top: 6px !important; font-size: 12px !important; letter-spacing: 0.4px !important; } /* --- Eingabefelder: Oberes Padding für den Label-Platz --- */ /* Hohe Spezifität nötig, um GF Theme Framework (Orbital) zu überschreiben, das via --gf-ctrl-size feste Höhen und Paddings setzt. */ .gform_wrapper .gfield.gf-md-floating .ginput_container input[type="text"], .gform_wrapper .gfield.gf-md-floating .ginput_container input[type="email"], .gform_wrapper .gfield.gf-md-floating .ginput_container input[type="tel"], .gform_wrapper .gfield.gf-md-floating .ginput_container input[type="url"], .gform_wrapper .gfield.gf-md-floating .ginput_container input[type="number"], .gform_wrapper .gfield.gf-md-floating .ginput_container input[type="password"], .gform_wrapper .gfield.gf-md-floating .ginput_container textarea, .gform_wrapper .gfield.gf-md-floating .ginput_container select { padding-top: 24px !important; padding-bottom: 8px !important; height: auto !important; min-height: 56px; } /* Doppelte Spezifität für GF Theme Framework */ .gform_wrapper.gform-theme .gfield.gf-md-floating .ginput_container input, .gform_wrapper.gform-theme .gfield.gf-md-floating .ginput_container textarea, .gform_wrapper.gform-theme .gfield.gf-md-floating .ginput_container select { padding-top: 24px !important; padding-bottom: 8px !important; height: auto !important; min-height: 56px; } /* --- Focus-Korrektur für Filled-Variante (2px border-bottom) --- */ .gform_wrapper .gfield.gf-md-floating .ginput_container input:focus, .gform_wrapper .gfield.gf-md-floating .ginput_container textarea:focus, .gform_wrapper .gfield.gf-md-floating .ginput_container select:focus { padding-bottom: 7px !important; /* 8px - 1px extra border */ } /* --- Outlined Variante: Focus-Padding-Korrektur --- */ .gform_wrapper.gf-md-outlined .gfield.gf-md-floating .ginput_container input:focus, .gform_wrapper.gf-md-outlined .gfield.gf-md-floating .ginput_container textarea:focus, .gform_wrapper.gf-md-outlined .gfield.gf-md-floating .ginput_container select:focus { padding-top: 23px; padding-bottom: 7px; } /* --- Outlined Variante: Label-Position anpassen --- */ .gform_wrapper.gf-md-outlined .gfield.gf-md-floating > .gfield_label, .gform_wrapper.gf-md-outlined .gfield.gf-md-floating > .gform-field-label { /* Outlined hat gleichmäßiges Padding, leicht andere Position */ top: 18px; left: 16px; } .gform_wrapper.gf-md-outlined .gfield.gf-md-floating:has(.ginput_container input:focus) > .gfield_label, .gform_wrapper.gf-md-outlined .gfield.gf-md-floating:has(.ginput_container textarea:focus) > .gfield_label, .gform_wrapper.gf-md-outlined .gfield.gf-md-floating:has(.ginput_container select:focus) > .gfield_label, .gform_wrapper.gf-md-outlined .gfield.gf-md-floating:has(.ginput_container input:focus) > .gform-field-label, .gform_wrapper.gf-md-outlined .gfield.gf-md-floating:has(.ginput_container textarea:focus) > .gform-field-label, .gform_wrapper.gf-md-outlined .gfield.gf-md-floating:has(.ginput_container select:focus) > .gform-field-label { top: 6px !important; font-size: 12px !important; letter-spacing: 0.4px !important; color: var(--gf-md-primary, #6750A4); } .gform_wrapper.gf-md-outlined .gfield.gf-md-floating:has(.ginput_container input:not(:placeholder-shown)) > .gfield_label, .gform_wrapper.gf-md-outlined .gfield.gf-md-floating:has(.ginput_container textarea:not(:placeholder-shown)) > .gfield_label, .gform_wrapper.gf-md-outlined .gfield.gf-md-floating:has(.ginput_container input:not(:placeholder-shown)) > .gform-field-label, .gform_wrapper.gf-md-outlined .gfield.gf-md-floating:has(.ginput_container textarea:not(:placeholder-shown)) > .gform-field-label { top: 6px !important; font-size: 12px !important; letter-spacing: 0.4px !important; } /* --- Outlined Variante: Select immer klein --- */ .gform_wrapper.gf-md-outlined .gfield.gf-md-floating--select > .gfield_label, .gform_wrapper.gf-md-outlined .gfield.gf-md-floating--select > .gform-field-label { top: 6px !important; font-size: 12px !important; letter-spacing: 0.4px !important; } /* --- Error State: Floating Label in Fehlerfarbe --- */ .gform_wrapper .gfield.gf-md-floating.gfield_error > .gfield_label, .gform_wrapper .gfield.gf-md-floating.gfield_error > .gform-field-label { color: var(--gf-md-error, #B3261E); } .gform_wrapper .gfield.gf-md-floating.gfield_error:has(.ginput_container input:focus) > .gfield_label, .gform_wrapper .gfield.gf-md-floating.gfield_error:has(.ginput_container textarea:focus) > .gfield_label, .gform_wrapper .gfield.gf-md-floating.gfield_error:has(.ginput_container input:focus) > .gform-field-label, .gform_wrapper .gfield.gf-md-floating.gfield_error:has(.ginput_container textarea:focus) > .gform-field-label { color: var(--gf-md-error, #B3261E); } /* --- Textarea: Label-Positionierung anpassen --- */ .gform_wrapper .gfield.gf-md-floating:has(.ginput_container textarea) > .gfield_label, .gform_wrapper .gfield.gf-md-floating:has(.ginput_container textarea) > .gform-field-label { top: 18px; } /* --- Required-Stern: in Floating Labels sichtbar halten --- */ .gform_wrapper .gfield.gf-md-floating .gfield_required { color: var(--gf-md-error, #B3261E); } /* --- Placeholder unsichtbar machen (wird nur für :placeholder-shown benötigt) --- */ .gform_wrapper .gfield.gf-md-floating .ginput_container input::placeholder, .gform_wrapper .gfield.gf-md-floating .ginput_container textarea::placeholder { color: transparent; } /* --- JS-Fallback: .gf-md-floating--filled Klasse (Autofill, vorausgefüllt) --- */ .gform_wrapper .gfield.gf-md-floating.gf-md-floating--filled > .gfield_label, .gform_wrapper .gfield.gf-md-floating.gf-md-floating--filled > .gform-field-label { top: 6px !important; font-size: 12px !important; letter-spacing: 0.4px !important; } /* --- Autofill-Erkennung via CSS-Animation --- */ @keyframes gfMdAutofillStart { from { opacity: 1; } to { opacity: 1; } } @keyframes gfMdAutofillCancel { from { opacity: 1; } to { opacity: 1; } } .gform_wrapper .gfield.gf-md-floating .ginput_container input:-webkit-autofill { animation-name: gfMdAutofillStart; animation-duration: 0.01s; } .gform_wrapper .gfield.gf-md-floating .ginput_container input:not(:-webkit-autofill) { animation-name: gfMdAutofillCancel; animation-duration: 0.01s; } /* ========================================================================== 4. Text Fields – Filled Variante (Standard) -------------------------------------------------------------------------- Doppelte Selektoren für GF Theme Framework Kompatibilität: - .gform_wrapper .ginput_container ... (GF 2.5 / gravity-theme) - .gform_wrapper.gform-theme .gfield .ginput_container ... (GF 2.8+ / orbital) ========================================================================== */ .gform_wrapper .ginput_container input[type="text"], .gform_wrapper .ginput_container input[type="email"], .gform_wrapper .ginput_container input[type="tel"], .gform_wrapper .ginput_container input[type="url"], .gform_wrapper .ginput_container input[type="number"], .gform_wrapper .ginput_container input[type="password"], .gform_wrapper .ginput_container textarea, .gform_wrapper .ginput_container select, .gform_wrapper.gform-theme .gfield .ginput_container input[type="text"], .gform_wrapper.gform-theme .gfield .ginput_container input[type="email"], .gform_wrapper.gform-theme .gfield .ginput_container input[type="tel"], .gform_wrapper.gform-theme .gfield .ginput_container input[type="url"], .gform_wrapper.gform-theme .gfield .ginput_container input[type="number"], .gform_wrapper.gform-theme .gfield .ginput_container input[type="password"], .gform_wrapper.gform-theme .gfield .ginput_container textarea, .gform_wrapper.gform-theme .gfield .ginput_container select { font-family: var(--gf-md-font-family, inherit); font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0.5px; color: var(--gf-md-on-surface, #1C1B1F); background-color: var(--gf-md-surface-container-highest, #E6E0E9); border: none; border-bottom: 1px solid var(--gf-md-on-surface-variant, #79747E); border-radius: 4px 4px 0 0; padding: 16px; width: 100%; outline: none; transition: border-color 0.2s cubic-bezier(0.2, 0, 0, 1), background-color 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1); -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* Hover */ .gform_wrapper .ginput_container input[type="text"]:hover, .gform_wrapper .ginput_container input[type="email"]:hover, .gform_wrapper .ginput_container input[type="tel"]:hover, .gform_wrapper .ginput_container input[type="url"]:hover, .gform_wrapper .ginput_container input[type="number"]:hover, .gform_wrapper .ginput_container input[type="password"]:hover, .gform_wrapper .ginput_container textarea:hover, .gform_wrapper .ginput_container select:hover, .gform_wrapper.gform-theme .gfield .ginput_container input:hover, .gform_wrapper.gform-theme .gfield .ginput_container textarea:hover, .gform_wrapper.gform-theme .gfield .ginput_container select:hover { border-bottom-color: var(--gf-md-on-surface, #1C1B1F); } /* Focus */ .gform_wrapper .ginput_container input[type="text"]:focus, .gform_wrapper .ginput_container input[type="email"]:focus, .gform_wrapper .ginput_container input[type="tel"]:focus, .gform_wrapper .ginput_container input[type="url"]:focus, .gform_wrapper .ginput_container input[type="number"]:focus, .gform_wrapper .ginput_container input[type="password"]:focus, .gform_wrapper .ginput_container textarea:focus, .gform_wrapper .ginput_container select:focus, .gform_wrapper.gform-theme .gfield .ginput_container input:focus, .gform_wrapper.gform-theme .gfield .ginput_container textarea:focus, .gform_wrapper.gform-theme .gfield .ginput_container select:focus { border-bottom: 2px solid var(--gf-md-primary, #6750A4); padding-bottom: 15px; /* compensate for thicker border */ } /* Placeholder */ .gform_wrapper .ginput_container input::placeholder, .gform_wrapper .ginput_container textarea::placeholder { color: var(--gf-md-on-surface-variant, #79747E); opacity: 1; } /* ========================================================================== 4b. Text Fields – Outlined Variante ========================================================================== */ .gform_wrapper.gf-md-outlined .ginput_container input[type="text"], .gform_wrapper.gf-md-outlined .ginput_container input[type="email"], .gform_wrapper.gf-md-outlined .ginput_container input[type="tel"], .gform_wrapper.gf-md-outlined .ginput_container input[type="url"], .gform_wrapper.gf-md-outlined .ginput_container input[type="number"], .gform_wrapper.gf-md-outlined .ginput_container input[type="password"], .gform_wrapper.gf-md-outlined .ginput_container textarea, .gform_wrapper.gf-md-outlined .ginput_container select { background-color: transparent; border: 1px solid var(--gf-md-outline, #79747E); border-radius: 4px; padding: 16px; } .gform_wrapper.gf-md-outlined .ginput_container input:hover, .gform_wrapper.gf-md-outlined .ginput_container textarea:hover, .gform_wrapper.gf-md-outlined .ginput_container select:hover { border-color: var(--gf-md-on-surface, #1C1B1F); } .gform_wrapper.gf-md-outlined .ginput_container input:focus, .gform_wrapper.gf-md-outlined .ginput_container textarea:focus, .gform_wrapper.gf-md-outlined .ginput_container select:focus { border: 2px solid var(--gf-md-primary, #6750A4); padding: 15px; /* compensate for thicker border */ } /* ========================================================================== 5. Textarea ========================================================================== */ .gform_wrapper .ginput_container textarea { min-height: 120px; resize: vertical; } /* ========================================================================== 6. Select / Dropdown ========================================================================== */ .gform_wrapper .ginput_container select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%2379747E'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 24px; padding-right: 44px; cursor: pointer; } .gform_wrapper .ginput_container select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%236750A4'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); } /* ========================================================================== 7. Checkboxes – Material Design 3 ========================================================================== */ .gform_wrapper .gfield_checkbox .gchoice, .gform_wrapper .gfield_checkbox li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; } .gform_wrapper .gfield_checkbox input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 18px; height: 18px; min-width: 18px; border: 2px solid var(--gf-md-on-surface-variant, #79747E); border-radius: 2px; background: transparent; cursor: pointer; position: relative; transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1), border-color 0.2s cubic-bezier(0.2, 0, 0, 1); } .gform_wrapper .gfield_checkbox input[type="checkbox"]:checked { background-color: var(--gf-md-primary, #6750A4); border-color: var(--gf-md-primary, #6750A4); } .gform_wrapper .gfield_checkbox input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 1px; left: 5px; width: 5px; height: 9px; border: solid var(--gf-md-on-primary, #FFFFFF); border-width: 0 2px 2px 0; transform: rotate(45deg); } .gform_wrapper .gfield_checkbox input[type="checkbox"]:hover { border-color: var(--gf-md-on-surface, #1C1B1F); } .gform_wrapper .gfield_checkbox input[type="checkbox"]:focus-visible { outline: 2px solid var(--gf-md-primary, #6750A4); outline-offset: 2px; } .gform_wrapper .gfield_checkbox label, .gform_wrapper .gfield_checkbox .gchoice label { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--gf-md-on-surface, #1C1B1F); cursor: pointer; } /* ========================================================================== 8. Radio Buttons – Material Design 3 ========================================================================== */ .gform_wrapper .gfield_radio .gchoice, .gform_wrapper .gfield_radio li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 0; } .gform_wrapper .gfield_radio input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 20px; height: 20px; min-width: 20px; border: 2px solid var(--gf-md-on-surface-variant, #79747E); border-radius: 50%; background: transparent; cursor: pointer; position: relative; transition: border-color 0.2s cubic-bezier(0.2, 0, 0, 1); } .gform_wrapper .gfield_radio input[type="radio"]:checked { border-color: var(--gf-md-primary, #6750A4); } .gform_wrapper .gfield_radio input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background-color: var(--gf-md-primary, #6750A4); border-radius: 50%; transform: translate(-50%, -50%); } .gform_wrapper .gfield_radio input[type="radio"]:hover { border-color: var(--gf-md-on-surface, #1C1B1F); } .gform_wrapper .gfield_radio input[type="radio"]:focus-visible { outline: 2px solid var(--gf-md-primary, #6750A4); outline-offset: 2px; } .gform_wrapper .gfield_radio label, .gform_wrapper .gfield_radio .gchoice label { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--gf-md-on-surface, #1C1B1F); cursor: pointer; } /* ========================================================================== 9. Consent Checkbox ========================================================================== */ .gform_wrapper .ginput_container_consent { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; } .gform_wrapper .ginput_container_consent input[type="checkbox"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 18px; height: 18px; min-width: 18px; margin-top: 3px; border: 2px solid var(--gf-md-on-surface-variant, #79747E); border-radius: 2px; background: transparent; cursor: pointer; position: relative; flex-shrink: 0; transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1), border-color 0.2s cubic-bezier(0.2, 0, 0, 1); } .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked { background-color: var(--gf-md-primary, #6750A4); border-color: var(--gf-md-primary, #6750A4); } .gform_wrapper .ginput_container_consent input[type="checkbox"]:checked::after { content: ''; position: absolute; top: 1px; left: 5px; width: 5px; height: 9px; border: solid var(--gf-md-on-primary, #FFFFFF); border-width: 0 2px 2px 0; transform: rotate(45deg); } .gform_wrapper .gfield_consent_label { font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--gf-md-on-surface, #1C1B1F); } /* ========================================================================== 10. File Upload ========================================================================== */ .gform_wrapper .ginput_container_fileupload { border: 2px dashed var(--gf-md-outline, #79747E); border-radius: 12px; padding: 24px; text-align: center; transition: border-color 0.2s cubic-bezier(0.2, 0, 0, 1), background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } .gform_wrapper .ginput_container_fileupload:hover { border-color: var(--gf-md-primary, #6750A4); background-color: rgba(103, 80, 164, 0.04); } .gform_wrapper .gform_drop_instructions { font-size: 14px; color: var(--gf-md-on-surface-variant, #79747E); margin-bottom: 12px; } .gform_wrapper .gform_button_select_files, .gform_wrapper button.gform_button_select_files { font-family: var(--gf-md-font-family, inherit); font-size: 14px; font-weight: 500; letter-spacing: 0.1px; color: var(--gf-md-primary, #6750A4); background: transparent; border: 1px solid var(--gf-md-outline, #79747E); border-radius: 20px; padding: 10px 24px; cursor: pointer; transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1), border-color 0.2s cubic-bezier(0.2, 0, 0, 1); } .gform_wrapper .gform_button_select_files:hover, .gform_wrapper button.gform_button_select_files:hover { background-color: rgba(103, 80, 164, 0.08); border-color: var(--gf-md-primary, #6750A4); } .gform_wrapper .gform_button_select_files:focus-visible, .gform_wrapper button.gform_button_select_files:focus-visible { outline: 2px solid var(--gf-md-primary, #6750A4); outline-offset: 2px; } /* ========================================================================== 11. Buttons – Filled Button (MD3) ========================================================================== */ .gform_wrapper .gform_footer input[type="submit"], .gform_wrapper .gform_footer button[type="submit"], .gform_wrapper .gform_page_footer .gform_next_button, .gform_wrapper .gform_page_footer .gform_button { font-family: var(--gf-md-font-family, inherit); font-size: 14px; font-weight: 500; letter-spacing: 0.1px; line-height: 20px; color: var(--gf-md-on-primary, #FFFFFF); background-color: var(--gf-md-primary, #6750A4); border: none; border-radius: 20px; padding: 10px 24px; min-height: 40px; cursor: pointer; transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15); } .gform_wrapper .gform_footer input[type="submit"]:hover, .gform_wrapper .gform_footer button[type="submit"]:hover, .gform_wrapper .gform_page_footer .gform_next_button:hover, .gform_wrapper .gform_page_footer .gform_button:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15); filter: brightness(1.08); } .gform_wrapper .gform_footer input[type="submit"]:active, .gform_wrapper .gform_footer button[type="submit"]:active, .gform_wrapper .gform_page_footer .gform_next_button:active, .gform_wrapper .gform_page_footer .gform_button:active { box-shadow: none; } .gform_wrapper .gform_footer input[type="submit"]:focus-visible, .gform_wrapper .gform_footer button[type="submit"]:focus-visible, .gform_wrapper .gform_page_footer .gform_next_button:focus-visible, .gform_wrapper .gform_page_footer .gform_button:focus-visible { outline: 2px solid var(--gf-md-primary, #6750A4); outline-offset: 2px; } /* Previous Button – Outlined (tonal) */ .gform_wrapper .gform_page_footer .gform_previous_button { font-family: var(--gf-md-font-family, inherit); font-size: 14px; font-weight: 500; letter-spacing: 0.1px; line-height: 20px; color: var(--gf-md-primary, #6750A4); background: transparent; border: 1px solid var(--gf-md-outline, #79747E); border-radius: 20px; padding: 10px 24px; min-height: 40px; cursor: pointer; transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1), border-color 0.2s cubic-bezier(0.2, 0, 0, 1); } .gform_wrapper .gform_page_footer .gform_previous_button:hover { background-color: rgba(103, 80, 164, 0.08); border-color: var(--gf-md-primary, #6750A4); } /* ========================================================================== 12. Validation / Error States ========================================================================== */ .gform_wrapper.gform_validation_error .gform_validation_errors { background-color: rgba(179, 38, 30, 0.04); border: 1px solid var(--gf-md-error, #B3261E); border-radius: 12px; padding: 16px; margin-bottom: 24px; color: var(--gf-md-error, #B3261E); } .gform_wrapper .gfield_error .ginput_container input, .gform_wrapper .gfield_error .ginput_container textarea, .gform_wrapper .gfield_error .ginput_container select { border-bottom-color: var(--gf-md-error, #B3261E); } .gform_wrapper .gfield_error .ginput_container input:focus, .gform_wrapper .gfield_error .ginput_container textarea:focus, .gform_wrapper .gfield_error .ginput_container select:focus { border-bottom-color: var(--gf-md-error, #B3261E); } /* Outlined variant errors */ .gform_wrapper.gf-md-outlined .gfield_error .ginput_container input, .gform_wrapper.gf-md-outlined .gfield_error .ginput_container textarea, .gform_wrapper.gf-md-outlined .gfield_error .ginput_container select { border-color: var(--gf-md-error, #B3261E); } .gform_wrapper .gfield_error .gfield_label, .gform_wrapper .gfield_error .gform-field-label { color: var(--gf-md-error, #B3261E); } .gform_wrapper .gfield_error .validation_message, .gform_wrapper .gfield_error .gfield_validation_message { font-size: 12px; font-weight: 400; letter-spacing: 0.4px; color: var(--gf-md-error, #B3261E); margin-top: 4px; padding: 0; background: transparent; border: none; } /* ========================================================================== 13. Field Description / Helper Text ========================================================================== */ .gform_wrapper .gfield_description, .gform_wrapper .gform-field-description { font-size: 12px; font-weight: 400; letter-spacing: 0.4px; line-height: 1.334; color: var(--gf-md-on-surface-variant, #79747E); margin-top: 4px; padding: 0; } /* ========================================================================== 14. Section Break ========================================================================== */ .gform_wrapper .gsection { border-bottom: 1px solid var(--gf-md-outline, #79747E); padding-bottom: 8px; margin-bottom: 24px; margin-top: 32px; } .gform_wrapper .gsection .gsection_title { font-family: var(--gf-md-font-family, inherit); font-size: 22px; font-weight: 400; line-height: 1.27; color: var(--gf-md-on-surface, #1C1B1F); } .gform_wrapper .gsection .gsection_description { font-size: 14px; color: var(--gf-md-on-surface-variant, #79747E); margin-top: 4px; } /* ========================================================================== 15. Multi-Page – Progress Bar ========================================================================== */ .gform_wrapper .gf_progressbar_wrapper { margin-bottom: 32px; } .gform_wrapper .gf_progressbar { background-color: var(--gf-md-surface-variant, #E7E0EC); border-radius: 4px; height: 4px; overflow: hidden; } .gform_wrapper .gf_progressbar_percentage { background-color: var(--gf-md-primary, #6750A4); height: 100%; border-radius: 4px; transition: width 0.4s cubic-bezier(0.2, 0, 0, 1); font-size: 0; line-height: 0; } .gform_wrapper .gf_page_steps { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; } .gform_wrapper .gf_step { font-size: 14px; font-weight: 400; color: var(--gf-md-on-surface-variant, #79747E); } .gform_wrapper .gf_step_active { font-weight: 500; color: var(--gf-md-primary, #6750A4); } /* ========================================================================== 16. Confirmation Message ========================================================================== */ .gform_confirmation_wrapper .gform_confirmation_message { font-family: var(--gf-md-font-family, inherit); background-color: rgba(103, 80, 164, 0.04); border: 1px solid var(--gf-md-primary, #6750A4); border-radius: 12px; padding: 24px; color: var(--gf-md-on-surface, #1C1B1F); font-size: 16px; line-height: 1.5; } /* ========================================================================== 17. List Field ========================================================================== */ .gform_wrapper .gfield_list_cell input { font-family: var(--gf-md-font-family, inherit); font-size: 16px; color: var(--gf-md-on-surface, #1C1B1F); background-color: var(--gf-md-surface-container-highest, #E6E0E9); border: none; border-bottom: 1px solid var(--gf-md-on-surface-variant, #79747E); border-radius: 4px 4px 0 0; padding: 12px 16px; transition: border-color 0.2s cubic-bezier(0.2, 0, 0, 1), background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } .gform_wrapper .gfield_list_cell input:focus { border-bottom: 2px solid var(--gf-md-primary, #6750A4); outline: none; } .gform_wrapper .gfield_list .add_list_item, .gform_wrapper .gfield_list .delete_list_item { border-radius: 50%; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1); } .gform_wrapper .gfield_list .add_list_item:hover, .gform_wrapper .gfield_list .delete_list_item:hover { background-color: rgba(103, 80, 164, 0.08); } /* ========================================================================== 18. Form Heading ========================================================================== */ .gform_wrapper .gform_heading .gform_title { font-family: var(--gf-md-font-family, inherit); font-size: 24px; font-weight: 400; line-height: 1.334; color: var(--gf-md-on-surface, #1C1B1F); margin-bottom: 8px; } .gform_wrapper .gform_heading .gform_description { font-size: 14px; font-weight: 400; line-height: 1.43; color: var(--gf-md-on-surface-variant, #79747E); margin-bottom: 24px; } /* ========================================================================== 19. Spacing & Layout ========================================================================== */ .gform_wrapper .gform_fields { gap: 16px; } .gform_wrapper .gfield { margin-bottom: 0; padding-bottom: 0; } .gform_wrapper .gform_footer { margin-top: 32px; padding-top: 16px; } /* ========================================================================== 20. Date & Time Fields ========================================================================== */ .gform_wrapper .ginput_container_date input, .gform_wrapper .gfield_date_month input, .gform_wrapper .gfield_date_day input, .gform_wrapper .gfield_date_year input, .gform_wrapper .gfield_time_hour input, .gform_wrapper .gfield_time_minute input, .gform_wrapper .gfield_time_ampm select { font-family: var(--gf-md-font-family, inherit); font-size: 16px; color: var(--gf-md-on-surface, #1C1B1F); } /* ========================================================================== 21. Complex Fields (Name, Address) – Basis ========================================================================== */ .gform_wrapper .ginput_complex .ginput_left, .gform_wrapper .ginput_complex .ginput_right, .gform_wrapper .ginput_complex .ginput_full { margin-bottom: 16px; } /* ========================================================================== 21b. Complex Fields – Floating Sub-Labels -------------------------------------------------------------------------- Complex Fields (z.B. Name = Vorname + Nachname) haben eine andere DOM-Struktur als einfache Felder:
Name
Weil das Label NACH dem Input steht, können wir den Adjacent Sibling Selector (input + label) nutzen statt :has(). Das ist performanter und hat bessere Browser-Kompatibilität. ========================================================================== */ /* --- Haupt-Label (legend) als statisches Label über der Feldgruppe --- */ .gform_wrapper .gfield.gf-md-floating-complex > .gfield_label, .gform_wrapper .gfield.gf-md-floating-complex > .gform-field-label, .gform_wrapper .gfield.gf-md-floating-complex > legend { position: static; font-size: 12px; font-weight: 400; letter-spacing: 0.4px; color: var(--gf-md-on-surface-variant, #79747E); margin-bottom: 8px; } /* --- Sub-Input-Container: relative Positionierung für das floating Label --- */ .gform_wrapper .gf-md-floating-complex .ginput_complex > span, .gform_wrapper.gform-theme .gf-md-floating-complex .ginput_complex > span { position: relative; --gf-ctrl-size: auto; } /* --- Sub-Label: absolut über dem Input positionieren --- */ .gform_wrapper .gf-md-floating-complex .ginput_complex > span > label, .gform_wrapper.gform-theme .gf-md-floating-complex .ginput_complex > span > label { position: absolute !important; top: 18px !important; left: 16px; z-index: 1; margin: 0 !important; padding: 0 !important; font-size: 16px !important; font-weight: 400; line-height: 1.5; letter-spacing: 0.5px !important; color: var(--gf-md-on-surface-variant, #79747E); pointer-events: none; transform-origin: top left; transition: top 0.2s cubic-bezier(0.2, 0, 0, 1), font-size 0.2s cubic-bezier(0.2, 0, 0, 1), color 0.2s cubic-bezier(0.2, 0, 0, 1), letter-spacing 0.2s cubic-bezier(0.2, 0, 0, 1); } /* --- Sub-Input: Padding für Label-Platz --- */ .gform_wrapper .gf-md-floating-complex .ginput_complex > span > input, .gform_wrapper.gform-theme .gf-md-floating-complex .ginput_complex > span > input { padding-top: 24px !important; padding-bottom: 8px !important; height: auto !important; min-height: 56px; } /* --- Schwebend (klein): Focus-Zustand (Adjacent Sibling!) --- */ .gform_wrapper .gf-md-floating-complex .ginput_complex > span > input:focus + label, .gform_wrapper.gform-theme .gf-md-floating-complex .ginput_complex > span > input:focus + label { top: 6px !important; font-size: 12px !important; letter-spacing: 0.4px !important; color: var(--gf-md-primary, #6750A4); } /* --- Schwebend (klein): Gefüllter Zustand (hat Wert, kein Placeholder sichtbar) --- */ .gform_wrapper .gf-md-floating-complex .ginput_complex > span > input:not(:placeholder-shown) + label, .gform_wrapper.gform-theme .gf-md-floating-complex .ginput_complex > span > input:not(:placeholder-shown) + label { top: 6px !important; font-size: 12px !important; letter-spacing: 0.4px !important; } /* --- Focus-Korrektur für Filled-Variante (2px border-bottom) --- */ .gform_wrapper .gf-md-floating-complex .ginput_complex > span > input:focus, .gform_wrapper.gform-theme .gf-md-floating-complex .ginput_complex > span > input:focus { padding-bottom: 7px !important; } /* --- Placeholder unsichtbar machen (wird nur für :placeholder-shown benötigt) --- */ .gform_wrapper .gf-md-floating-complex .ginput_complex > span > input::placeholder { color: transparent; } /* --- JS-Fallback: .gf-md-floating-sub--filled Klasse (Autofill, vorausgefüllt) --- */ .gform_wrapper .gf-md-floating-complex .ginput_complex > span.gf-md-floating-sub--filled > label { top: 6px !important; font-size: 12px !important; letter-spacing: 0.4px !important; } /* --- Error State: Sub-Labels in Fehlerfarbe --- */ .gform_wrapper .gf-md-floating-complex.gfield_error .ginput_complex > span > label { color: var(--gf-md-error, #B3261E); } .gform_wrapper .gf-md-floating-complex.gfield_error .ginput_complex > span > input:focus + label { color: var(--gf-md-error, #B3261E); } /* --- Outlined Variante --- */ .gform_wrapper.gf-md-outlined .gf-md-floating-complex .ginput_complex > span > input:focus + label { top: 6px !important; font-size: 12px !important; letter-spacing: 0.4px !important; color: var(--gf-md-primary, #6750A4); } .gform_wrapper.gf-md-outlined .gf-md-floating-complex .ginput_complex > span > input:not(:placeholder-shown) + label { top: 6px !important; font-size: 12px !important; letter-spacing: 0.4px !important; } .gform_wrapper.gf-md-outlined .gf-md-floating-complex .ginput_complex > span > input:focus { padding-top: 23px; padding-bottom: 7px; } /* --- Autofill-Erkennung via CSS-Animation --- */ .gform_wrapper .gf-md-floating-complex .ginput_complex > span > input:-webkit-autofill { animation-name: gfMdAutofillStart; animation-duration: 0.01s; } .gform_wrapper .gf-md-floating-complex .ginput_complex > span > input:not(:-webkit-autofill) { animation-name: gfMdAutofillCancel; animation-duration: 0.01s; } /* ========================================================================== 22. Accessibility Enhancements ========================================================================== */ /* Skip link styles */ .gform_wrapper .gform_fields *:focus-visible { outline: 2px solid var(--gf-md-primary, #6750A4); outline-offset: 2px; } /* High contrast mode support */ @media (forced-colors: active) { .gform_wrapper .gfield_checkbox input[type="checkbox"], .gform_wrapper .gfield_radio input[type="radio"] { forced-color-adjust: auto; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .gform_wrapper, .gform_wrapper * { transition-duration: 0.01ms !important; } } /* ========================================================================== 23. Print Styles ========================================================================== */ @media print { .gform_wrapper .ginput_container input, .gform_wrapper .ginput_container textarea, .gform_wrapper .ginput_container select { border: 1px solid #000; background: #fff; } .gform_wrapper .gform_footer input[type="submit"] { display: none; } }