/* ===================================================================== Mind driven Shooting · WPForms Lite (Kontaktformular) Die Live-Site rendert das Formular im modernen WPForms-Markup (wpforms-full.min.css, Klasse .wpforms-render-modern, geprüft 2026-09-03). Farben und Maße kommen dort aus CSS-Variablen, die WPForms per Inline-Style auf :root setzt (ohne !important). Alle Regeln hier stehen hinter #mds, der ID am -Element des Themes (header.php). Das schlägt :root und die Klassen-Selektoren von WPForms unabhängig von der Ladereihenfolge. Formularaufbau ohne Pro-Version: keine bedingten Felder, die Sportfelder sind für alle optional. Feldliste in der README. ===================================================================== */ #mds .wpforms-container-full { --wpforms-field-border-radius: var(--mds-radius); --wpforms-field-border-style: solid; --wpforms-field-border-size: 1px; --wpforms-field-border-color: var(--mds-hair-strong); --wpforms-field-border-color-spare: var(--mds-hair-strong); --wpforms-field-background-color: transparent; --wpforms-field-text-color: var(--mds-paper); --wpforms-field-menu-color: var(--mds-steel); --wpforms-label-color: var(--mds-muted); --wpforms-label-sublabel-color: var(--mds-muted); --wpforms-label-error-color: var(--mds-paper); --wpforms-button-background-color: var(--mds-paper); --wpforms-button-border-color: var(--mds-paper); --wpforms-button-border-style: solid; --wpforms-button-border-size: 1px; --wpforms-button-border-radius: var(--mds-radius); --wpforms-button-text-color: var(--mds-ink); --wpforms-field-size-input-height: var(--mds-control); --wpforms-field-size-font-size: 16px; --wpforms-field-size-line-height: 24px; --wpforms-field-size-padding-h: 16px; --wpforms-field-size-input-spacing: 24px; --wpforms-field-size-checkbox-size: 20px; --wpforms-field-size-sublabel-spacing: 8px; --wpforms-field-size-icon-size: 16px; --wpforms-label-size-font-size: 13px; --wpforms-label-size-line-height: 20px; --wpforms-label-size-sublabel-font-size: 13px; --wpforms-label-size-sublabel-line-height: 18px; --wpforms-button-size-font-size: var(--mds-button); --wpforms-button-size-height: var(--mds-control); --wpforms-button-size-padding-h: 28px; --wpforms-button-size-margin-top: 8px; --wpforms-container-padding: 0; --wpforms-container-border-style: none; --wpforms-container-border-width: 0; --wpforms-container-border-radius: 0; --wpforms-container-shadow-size-box-shadow: none; --wpforms-background-color: transparent; --wpforms-background-image: none; --wpforms-page-break-color: var(--mds-steel); font-family: var(--mds-font); color: var(--mds-paper); } /* ---------- Raster: zwei Spalten, lange Felder über die volle Breite ---------- */ #mds .wpforms-form .wpforms-field-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } #mds .wpforms-form .wpforms-field { margin: 0 !important; padding: 0 !important; } #mds .wpforms-form .wpforms-field-name, #mds .wpforms-form .wpforms-field-textarea, #mds .wpforms-form .wpforms-field-checkbox, #mds .wpforms-form .wpforms-field-gdpr-checkbox, #mds .wpforms-form .wpforms-field-radio, #mds .wpforms-form .wpforms-field-html, #mds .wpforms-form .wpforms-field-divider, #mds .wpforms-form .wpforms-field-pagebreak { grid-column: 1 / -1; } #mds .wpforms-form .wpforms-field-small, #mds .wpforms-form .wpforms-field-medium, #mds .wpforms-form .wpforms-field-large { max-width: 100% !important; width: 100% !important; } @media (max-width: 767px) { #mds .wpforms-form .wpforms-field-container { grid-template-columns: minmax(0, 1fr); gap: 20px; } } /* ---------- Beschriftungen ---------- */ #mds .wpforms-form .wpforms-field-label { display: block; margin: 0 0 8px !important; padding: 0; font-family: var(--mds-font); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mds-muted); } #mds .wpforms-form .wpforms-required-label { color: var(--mds-steel); } #mds .wpforms-form .wpforms-field-sublabel { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--mds-muted); margin-top: 8px; } #mds .wpforms-form .wpforms-field-description { font-size: 15px; line-height: 1.5; color: var(--mds-muted); margin: 8px 0 0; } /* ---------- Eingabefelder ---------- */ #mds .wpforms-form input[type="text"], #mds .wpforms-form input[type="email"], #mds .wpforms-form input[type="tel"], #mds .wpforms-form input[type="url"], #mds .wpforms-form input[type="number"], #mds .wpforms-form select, #mds .wpforms-form textarea { font-family: var(--mds-font); font-size: 16px; color: var(--mds-paper); background-color: transparent; border: 1px solid var(--mds-hair-strong); border-radius: var(--mds-radius); box-shadow: none !important; outline: none; } #mds .wpforms-form input:focus, #mds .wpforms-form select:focus, #mds .wpforms-form textarea:focus { border-color: var(--mds-paper) !important; box-shadow: none !important; } #mds .wpforms-form input::placeholder, #mds .wpforms-form textarea::placeholder { color: #8A9099; opacity: 1; } #mds .wpforms-form textarea { min-height: 180px; padding-top: 14px; padding-bottom: 14px; line-height: 1.5; resize: vertical; } #mds .wpforms-form select option { background: var(--mds-ink); color: var(--mds-paper); } /* Zwei Teilfelder im Namensfeld (Vorname, Nachname) */ #mds .wpforms-form .wpforms-field-row { max-width: 100% !important; } /* Kontrollkästchen: Marken-Häkchen statt WPForms-Grafik */ #mds .wpforms-form input[type="checkbox"], #mds .wpforms-form input[type="radio"] { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 2px 12px 0 0; flex-shrink: 0; border: 1px solid var(--mds-steel); border-radius: var(--mds-radius); background: transparent !important; background-image: none !important; display: inline-grid; place-content: center; box-shadow: none !important; } #mds .wpforms-form input[type="radio"] { border-radius: 50%; } #mds .wpforms-form input[type="checkbox"]:checked { background: var(--mds-paper) !important; border-color: var(--mds-paper); } #mds .wpforms-form input[type="checkbox"]:checked::before, #mds .wpforms-form input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--mds-ink); border-bottom: 2px solid var(--mds-ink); transform: translateY(-2px) rotate(-45deg); background: none; mask: none; -webkit-mask: none; } #mds .wpforms-form input[type="checkbox"]:checked::after { display: none; } #mds .wpforms-form input[type="radio"]:checked::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mds-paper); } #mds .wpforms-form .wpforms-field-checkbox ul li, #mds .wpforms-form .wpforms-field-radio ul li, #mds .wpforms-form .wpforms-field-gdpr-checkbox ul li { display: flex; align-items: flex-start; margin-bottom: 12px; } #mds .wpforms-form .wpforms-field-checkbox ul li label, #mds .wpforms-form .wpforms-field-radio ul li label, #mds .wpforms-form .wpforms-field-gdpr-checkbox ul li label { display: flex; align-items: flex-start; margin: 0; font-size: 15px; line-height: 1.5; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--mds-muted); } /* ---------- Fehler und Meldungen (monochrom: Rahmen 2 px in Paper, Text Bold) ---------- */ #mds .wpforms-form label.wpforms-error, #mds .wpforms-form em.wpforms-error { display: block; margin: 8px 0 0; font-size: 13px; font-weight: 700; font-style: normal; letter-spacing: 0; text-transform: none; color: var(--mds-paper); } #mds .wpforms-form input.wpforms-error, #mds .wpforms-form select.wpforms-error, #mds .wpforms-form textarea.wpforms-error { border-color: var(--mds-paper) !important; border-width: 2px !important; } #mds .wpforms-container-full .wpforms-error-container, #mds .wpforms-confirmation-container-full, #mds div[submit-success] > .wpforms-confirmation-container-full { margin: 0 0 32px; padding: 24px !important; background: transparent !important; border: 1px solid var(--mds-hair) !important; border-radius: var(--mds-radius); font-size: 17px; line-height: 1.6; color: var(--mds-paper); } #mds .wpforms-confirmation-container-full p { color: var(--mds-paper); margin: 0; } #mds .wpforms-confirmation-container-full p + p { margin-top: 12px; } /* ---------- Absenden ---------- */ #mds .wpforms-form .wpforms-submit-container { margin-top: 32px; padding: 0; } #mds .wpforms-form button.wpforms-submit { font-family: var(--mds-font); font-size: var(--mds-button); font-weight: 500; letter-spacing: var(--mds-button-ls); text-transform: uppercase; min-height: var(--mds-control); padding: 0 28px; border-radius: var(--mds-radius); background: var(--mds-paper) !important; color: var(--mds-ink) !important; border: 1px solid var(--mds-paper) !important; box-shadow: none !important; transition: background .2s ease, color .2s ease; } #mds .wpforms-form button.wpforms-submit:hover, #mds .wpforms-form button.wpforms-submit:focus { background: var(--mds-muted) !important; color: var(--mds-ink) !important; border-color: var(--mds-muted) !important; } #mds .wpforms-form button.wpforms-submit:disabled { opacity: .4; } @media (max-width: 767px) { #mds .wpforms-form button.wpforms-submit { width: 100%; } } /* ---------- Helle Sektion ---------- */ #mds .mds-light .wpforms-container-full { --wpforms-field-border-color: rgba(9, 10, 12, .35); --wpforms-field-text-color: var(--mds-ink); --wpforms-label-color: var(--mds-surface); --wpforms-label-sublabel-color: var(--mds-surface); --wpforms-label-error-color: var(--mds-ink); --wpforms-button-background-color: var(--mds-ink); --wpforms-button-border-color: var(--mds-ink); --wpforms-button-text-color: var(--mds-paper); color: var(--mds-ink); } #mds .mds-light .wpforms-form .wpforms-field-label, #mds .mds-light .wpforms-form .wpforms-field-description, #mds .mds-light .wpforms-form .wpforms-field-checkbox ul li label, #mds .mds-light .wpforms-form .wpforms-field-gdpr-checkbox ul li label { color: var(--mds-surface); } #mds .mds-light .wpforms-form input[type="text"], #mds .mds-light .wpforms-form input[type="email"], #mds .mds-light .wpforms-form input[type="tel"], #mds .mds-light .wpforms-form select, #mds .mds-light .wpforms-form textarea { color: var(--mds-ink); border-color: rgba(9, 10, 12, .35); } #mds .mds-light .wpforms-form input:focus, #mds .mds-light .wpforms-form select:focus, #mds .mds-light .wpforms-form textarea:focus { border-color: var(--mds-ink) !important; } #mds .mds-light .wpforms-form input[type="checkbox"] { border-color: var(--mds-surface); } #mds .mds-light .wpforms-form input[type="checkbox"]:checked { background: var(--mds-ink) !important; border-color: var(--mds-ink); } #mds .mds-light .wpforms-form input[type="checkbox"]:checked::before { border-color: var(--mds-paper); } #mds .mds-light .wpforms-form button.wpforms-submit { background: var(--mds-ink) !important; color: var(--mds-paper) !important; border-color: var(--mds-ink) !important; } #mds .mds-light .wpforms-form button.wpforms-submit:hover { background: var(--mds-surface) !important; color: var(--mds-paper) !important; border-color: var(--mds-surface) !important; }