/** * SV-Kontaktformular – Floating-Labels. * * Wirkt auf das Contact-Form-7-Formular, dessen Markup mit * `.cf7-sv-form`-Wrapper und der BEM-Klassen `.cf7-sv__field`, * `.cf7-sv__input`, `.cf7-sv__label` aufgebaut ist. * * Die Floating-Logik kombiniert CSS und ein kleines JS: * - `:has( .cf7-sv__input:focus )` reagiert, sobald das Feld den * Fokus hat – per Definition reines CSS. * - `.cf7-sv__field--filled` wird per JavaScript gesetzt, wenn das * Feld einen Wert enthaelt. Das ersetzt `:placeholder-shown`, * das ein nicht-leeres Placeholder-Attribut voraussetzen wuerde. * Auf das Placeholder-Attribut wird verzichtet, weil CF7 6.1.5 * `placeholder " "` (whitespace-only Quoted-Value) nicht parst. * - `:has()` ist trotzdem noetig fuer den Focus-Zweig, weil CF7 * den Input zusaetzlich in `` * wickelt und das Label dadurch kein direkter Sibling ist. * * @package welpentheme * @author Jörn Gorres * @version 1.0.0 */ /* ------------------------------------------------------------------ * Form-Container * ------------------------------------------------------------------ */ .cf7-sv-form { display: grid; gap: 1rem; max-width: 640px; } /* ------------------------------------------------------------------ * Field-Wrapper * ------------------------------------------------------------------ */ .cf7-sv__field { position: relative; } /* CF7 wrappt jeden Input/Textarea in . Den machen wir block-level, sonst kollabiert die Hoehe. */ .cf7-sv__field .wpcf7-form-control-wrap { display: block; } /* WPautop-Artefakte neutralisieren: WordPress fuegt beim Rendern `

` und `
` in das Field ein, was die Wrapper-Hoehe ueber die reine Input-Hoehe hinaus aufblaeht. Dadurch wuerde `top: 50%` fuer das Floating-Label tiefer landen als der visuelle Input-Mittelpunkt. Mit margin/padding 0 und ausgeblendeten
wird die Field-Hoehe wieder identisch zur Input-Hoehe. */ .cf7-sv__field p { margin: 0; padding: 0; } .cf7-sv__field br { display: none; } /* ------------------------------------------------------------------ * Eingabefelder * ------------------------------------------------------------------ */ /* Wichtig: GeneratePress (Parent-Theme) setzt mit `input[type=text],…,textarea { border-radius:0; border:1px solid #ccc; … }` eine Regel mit Specificity 0,1,1. Unsere Klasse `.cf7-sv__input` alleine hat nur 0,1,0 und verliert. Mit dem Wrapper-Selector `.cf7-sv-form .cf7-sv__input` kommen wir auf 0,2,0 und gewinnen. */ .cf7-sv-form .cf7-sv__input { box-sizing: border-box; width: 100%; padding: 1.4rem 0.85rem 0.6rem; /* Ruherahmen 1:1 wie das Suchformular der Site (welpentheme/css/navigation.css → .below-menu-search input[type="search"]) */ border: 1px solid #898989; border-radius: 3px; /* Hellgrauer Hintergrund analog zum Suchfeld (per GeneratePress-Default). */ background: #fafafa; font-size: 16px; font-family: inherit; color: #1d2327; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .cf7-sv-form textarea.cf7-sv__input { min-height: 8em; padding-top: 1.6rem; resize: vertical; } /* Focus-Zustand: blauer Glow analog zum Suchfeld (welpentheme/css/navigation.css → .below-menu-search …:focus). Vier Schatten-Offsets fuer Glow auf allen Seiten – das Suchfeld selbst hat nur drei (links/oben/unten), weil es mit dem Submit- Button verklebt ist; hier stehen die Felder frei, also auch rechts. */ .cf7-sv-form .cf7-sv__input:focus { outline: none; border-color: #37AAE1; box-shadow: -3px 0 5px -2px rgba( 55, 170, 225, 0.4 ), 3px 0 5px -2px rgba( 55, 170, 225, 0.4 ), 0 -3px 5px -2px rgba( 55, 170, 225, 0.4 ), 0 3px 5px -2px rgba( 55, 170, 225, 0.4 ); } /* ------------------------------------------------------------------ * Floating-Label – Ruheposition (sieht aus wie Placeholder) * ------------------------------------------------------------------ */ .cf7-sv__label { position: absolute; /* Vertikal mittig im Feld – `transform: translateY(-50%)` verschiebt das Label um die Hälfte seiner eigenen Höhe nach oben, wodurch sein Mittelpunkt exakt auf `top: 50%` sitzt. */ top: 50%; transform: translateY( -50% ); left: 0.85rem; color: #6b7280; font-size: 16px; line-height: 1; pointer-events: none; /* Hintergrund passend zum Feld (#fafafa), damit das Label sauber mit dem Feld verschmilzt. Beim Floaten ueber die obere Border- Linie ist die untere Haelfte ueberm Feld (blendet) und die obere Haelfte ueberm Seitenhintergrund – dort entsteht der „Notch"- Effekt durch den feinen Kontrast. */ background: #fafafa; padding: 0 0.25rem; font-family: inherit; transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease; } /* Floating-Position: wenn das Feld fokussiert ist (CSS) ODER Inhalt hat (Klasse `--filled` per JS gesetzt). Label rutscht hoch, bis sein Mittelpunkt exakt auf der oberen Border-Linie sitzt. */ .cf7-sv__field:has( .cf7-sv__input:focus ) .cf7-sv__label, .cf7-sv__field--filled .cf7-sv__label { top: 0; transform: translateY( -50% ); font-size: 12px; color: #5a9e33; } /* Textarea-Default: Label sitzt INNERHALB des Textareas, leicht vom oberen Rand abgesetzt – wie ein Placeholder, in NORMALER Schriftgroesse (16 px aus dem Default-Label-Style), grau. Greift NUR im Ruhezustand: bei Focus oder gefuelltem Feld floatet das Label nach oben in kleine Schrift (siehe Regeln unten). `:has( textarea.cf7-sv__input )` erkennt automatisch das Textarea- Feld – kein Markup-Update im CF7-Backend noetig. */ .cf7-sv__field:has( textarea.cf7-sv__input ) .cf7-sv__label { top: 1.2rem; transform: none; /* font-size: explizit NICHT setzen – Default 16 px greift. */ } /* Gefuelltes Textarea: muss die Textarea-Default-Regel oberhalb ueberschreiben, damit das Label auch im unfokussierten "gefuellt"- Zustand sichtbar floatet. Specificity-Tie mit der Default-Regel (beide 0,3,1) wird durch die spaetere Definition aufgeloest. */ .cf7-sv__field--filled:has( textarea.cf7-sv__input ) .cf7-sv__label { top: 0; transform: translateY( -50% ); } /* ------------------------------------------------------------------ * Validierungsfehler – CF7 setzt `.wpcf7-not-valid` auf das Input * ------------------------------------------------------------------ */ .cf7-sv__field:has( .wpcf7-not-valid ) .cf7-sv__input { border-color: #d63638; } .cf7-sv__field:has( .wpcf7-not-valid ) .cf7-sv__label { color: #d63638; } /* ------------------------------------------------------------------ * Senden-Button * ------------------------------------------------------------------ */ .cf7-sv__actions { display: flex; justify-content: flex-start; } /* Wichtig: GeneratePress (Parent-Theme) setzt mit `html input[type=submit] { background:#55555e; … }` eine Regel mit Specificity 0,1,2. `.cf7-sv__submit` allein hat nur 0,1,0 und verliert. Mit `.cf7-sv-form .cf7-sv__submit` kommen wir auf 0,2,0 und schlagen den GeneratePress-Default. */ .cf7-sv-form .cf7-sv__submit { background: #5a9e33; /* SV-Akademie-Grün */ color: #fff; border: 1px solid transparent; border-radius: 4px; padding: 0.75rem 1.75rem; font-size: 16px; /* Beschriftung in Roboto Slab Bold (passt zum Theme-Heading-Stil). Das Theme laedt Roboto Slab in 400 und 700 (siehe css/fonts.css). */ font-family: 'Roboto Slab', serif; font-weight: 700; cursor: pointer; transition: background 0.2s ease; } .cf7-sv-form .cf7-sv__submit:hover, .cf7-sv-form .cf7-sv__submit:focus-visible { background: #4a8528; outline: none; } .cf7-sv-form .cf7-sv__submit:disabled { background: #9aa0a6; cursor: not-allowed; } /* ------------------------------------------------------------------ * Mobile * ------------------------------------------------------------------ */ @media ( max-width: 600px ) { .cf7-sv-form { gap: 0.85rem; } .cf7-sv__actions { justify-content: stretch; } .cf7-sv__submit { width: 100%; } }