/* ========================================================================== GROTEC KONTAKTFORMULAR Contact Form 7 Custom Styling Dieses Stylesheet definiert das Aussehen des Kontaktformulars ========================================================================== */ /* ========================================================================== 1. GRUNDLEGENDE VARIABLEN & RESET ========================================================================== */ /* Basis-Reset für das Formular */ #kontakt-grotec-id .wpcf7-form .grotec-kontakt { margin-top: 0px; /* Entfernt äußere Abstände */ padding: 0; /* Entfernt innere Abstände */ font-weight: 300; /* Setzt leichte Schriftstärke */ font-family: 'mundial-narrow-variable', sans-serif; /* Setzt die korrekte Schriftart */ width: 100%; /* Nutzt volle verfügbare Breite */ box-sizing: border-box; /* Inkludiert Padding in Breitenberechnung */ height: 71vh; overflow: visible; /* Höhe von dem Kntaktblock 71vh */ } /* Basis-Container für das gesamte Formular */ /* Reset für alle Formular-Elemente */ .wpcf7-form .grotec-kontakt * { box-sizing: border-box; /* Konsistente Breitenberechnung für alle Elemente */ line-height: normal; /* Standardisierte Zeilenhöhe */ margin: 0; /* Entfernt alle Außenabstände */ } /* Grundlegendes Reset für alle Formular-Elemente */ /* Spezifische Abstände für Feldgruppen */ #kontakt-grotec-id .wpcf7-form .grotec-kontakt [class^="field-group-"] { margin-bottom: 0px; /* 20px Abstand zwischen den Feldgruppen */ } #kontakt-grotec-id .wpcf7-form .grotec-kontakt [class^="field-group-"]:last-child { margin-bottom: 0; /* Letzter Feldgruppe keinen unteren Abstand */ } /* Abstände innerhalb der Feldgruppen */ #kontakt-grotec-id .wpcf7-form .grotec-kontakt .label-title { margin: 0 0 0 0; /* Kein Abstand um label-title */ padding: 0; /* Kein Padding */ } #kontakt-grotec-id .wpcf7-form .grotec-kontakt .label-input { margin: 0 0 0 0; /* Kein Abstand zwischen label-title und label-input */ padding: 0; /* Kein Padding */ line-height: 2; /* Kompakte Zeilenhöhe */ } /* Text im Eingabefeld oben positionieren */ #kontakt-grotec-id .wpcf7-form .grotec-kontakt input:not([type="submit"]), #kontakt-grotec-id .wpcf7-form .grotec-kontakt textarea { vertical-align: top; /* Text oben im Feld positionieren */ padding-top: 5px; /* Minimaler oberer Innenabstand */ } /* ========================================================================== 2. FORMULAR-STRUKTUR & LAYOUT ========================================================================== */ /* Hauptcontainer */ .wpcf7-form .grotec-kontakt .form { display: flex; font-family: 'mundial-narrow-variable', sans-serif; /* Aktiviert Flexbox-Layout */ width: 100%; /* Volle Containerbreite */ flex-direction: column; /* Vertikale Anordnung */ align-items: flex-start; /* Linksbündige Ausrichtung */ gap: 0px; /* Kein Abstand zwischen Elementen */ padding: 0 10px; /* Seitlicher Innenabstand */ } /* Hauptcontainer mit flexibler Ausrichtung */ /* Formularfelder-Container */ .wpcf7-form .grotec-kontakt .form-fields { display: flex; font-family: 'mundial-narrow-variable', sans-serif; /* Flexbox für Feldanordnung */ flex-direction: column; /* Vertikale Ausrichtung */ align-items: flex-start; /* Linksbündige Ausrichtung */ width: 100%; /* Volle Breite */ } /* Container für alle Eingabefelder */ /* Feldgruppen-Layout */ .wpcf7-form .grotec-kontakt [class^="field-group-"] { display: flex; font-family: 'mundial-narrow-variable', sans-serif; flex-direction: column; align-items: flex-start; width: 100%; margin-top: 25px; gap: 6px; } /* Styling für einzelne Feldgruppen */ .wpcf7-form .grotec-kontakt .field-group-1 { margin-top: 0; } /* Entfernt oberen Abstand der ersten Gruppe */ /* ========================================================================== 3. EINGABEFELDER ========================================================================== */ /* Basis-Styling für alle Eingabefelder */ .wpcf7-form .grotec-kontakt input:not([type="submit"]), .wpcf7-form .grotec-kontakt textarea, .wpcf7-form .grotec-kontakt select { width: 100%; /* Volle Breite */ background-color: transparent; /* Durchsichtiger Hintergrund */ border: none; /* Kein Rahmen */ border-bottom: 0px solid #c6c6c6; /* Untere Grenzlinie */ padding: 8px 0; /* Vertikaler Innenabstand */ font-size: 18px; /* Schriftgröße */ font-family: 'mundial-narrow-variable', sans-serif; /* Setzt die korrekte Schriftart */ transition: border-color 0.3s ease; /* Sanfter Übergang bei Hover */ } /* Basis-Styling für alle Eingabefelder */ /* Fokus-Zustand */ .wpcf7-form .grotec-kontakt input:focus, .wpcf7-form .grotec-kontakt textarea:focus, .wpcf7-form .grotec-kontakt select:focus { outline: none; /* Entfernt Standard-Fokus-Rahmen */ border-bottom-color: #ff003a; /* Rote Unterlinie bei Fokus */ } /* Fokus-Zustand der Eingabefelder */ /* ========================================================================== 4. BESCHRIFTUNGEN & TEXT ========================================================================== */ /* Feld-Überschriften */ .wpcf7-form .grotec-kontakt .label-title { font-size: 16px; /* Schriftgröße für Titel */ font-weight: 300; /* Leichte Schriftstärke */ color: #000000; /* Dunkelrote Farbe */ letter-spacing: 0.8px; /* Buchstabenabstand */ text-transform: uppercase; /* Großbuchstaben */ } /* Styling für Feld-Überschriften */ /* Eingabefeld-Labels */ .wpcf7-form .grotec-kontakt .label-input { font-size: 22px; /* Größere Schrift für Eingabefelder */ font-weight: 300; /* Leichte Schriftstärke */ color: #c6c6c6; /* Helle Graufarbe */ margin-top: 6px; /* Abstand nach oben */ } /* Styling für Eingabefeld-Labels */ /* ========================================================================== 5. PLACEHOLDER-STYLING ========================================================================== */ /* Standard Placeholder */ .wpcf7-form .grotec-kontakt input::placeholder, .wpcf7-form .grotec-kontakt textarea::placeholder { font-size: 22px !important; font-weight: 300; color: #c6c6c6; opacity: 1; } /* Standard Placeholder-Styling */ /* Webkit Browser (Chrome, Safari) */ .wpcf7-form .grotec-kontakt input::-webkit-input-placeholder, .wpcf7-form .grotec-kontakt textarea::-webkit-input-placeholder { font-size: 22px !important; font-weight: 300; color: #c6c6c6; } /* Chrome/Safari Placeholder */ /* Firefox */ .wpcf7-form .grotec-kontakt input::-moz-placeholder, .wpcf7-form .grotec-kontakt textarea::-moz-placeholder { font-size: 22px !important; font-weight: 300; color: #c6c6c6; } /* Firefox Placeholder */ /* Internet Explorer */ .wpcf7-form .grotec-kontakt input:-ms-input-placeholder, .wpcf7-form .grotec-kontakt textarea:-ms-input-placeholder { font-size: 22px !important; font-weight: 300; color: #c6c6c6; } /* Internet Explorer Placeholder */ /* ========================================================================== 6. SUBMIT BUTTON ========================================================================== */ /* Button Basis-Styling */ .wpcf7-form .grotec-kontakt .submit-btn, .wpcf7-form .grotec-kontakt input[type="submit"] { min-width: 165px; /* Minimale Buttonbreite */ max-width: 180px; font-family: 'mundial-narrow-variable', sans-serif; /* Maximale Buttonbreite */ height: 45px; /* Feste Buttonhöhe */ padding: 0 30px; /* Seitlicher Innenabstand */ background-color: #ff003a; /* Rote Hintergrundfarbe */ color: #ffffff; /* Weiße Schriftfarbe */ border: none; /* Kein Rahmen */ border-radius: 30px; /* Abgerundete Ecken */ font-size: 24px; /* Schriftgröße */ font-weight: 300; /* Leichte Schriftstärke */ text-align: center; /* Zentrierter Text */ white-space: nowrap; /* Verhindert Textumbruch */ text-transform: none; /* Keine Texttransformation */ display: inline-flex; /* Inline Flexbox Layout */ align-items: center; /* Vertikale Zentrierung */ justify-content: center; /* Horizontale Zentrierung */ cursor: pointer; /* Hand-Cursor bei Hover */ transition: background-color 0.3s ease; /* Sanfter Farbübergang */ } /* Styling für den Submit-Button */ /* Button Hover */ .wpcf7-form .grotec-kontakt .submit-btn:hover, .wpcf7-form .grotec-kontakt input[type="submit"]:hover { background-color: #ff003cb2; /* Transparenteres Rot bei Hover */ } /* Hover-Effekt für den Submit-Button */ /* ========================================================================== 7. RESPONSIVE DESIGN ========================================================================== */ /* Tablet (max-width: 1023px) ========================================================================== */ @media screen and (max-width: 1023px) { #kontakt-grotec-id .wpcf7-form .grotec-kontakt { margin-top: 0px; /* Entfernt äußere Abstände */ padding: 0; /* Entfernt innere Abstände */ font-weight: 300; /* Setzt leichte Schriftstärke */ font-family: 'mundial-narrow-variable', sans-serif; /* Setzt die korrekte Schriftart */ width: 100%; /* Nutzt volle verfügbare Breite */ box-sizing: border-box; /* Inkludiert Padding in Breitenberechnung */ height: auto; overflow: visible; /* Höhe von dem Kntaktblock 71vh */ } /* Container und Abstände */ .sc-contactForm .sc-inner{ max-width: 100% !important; width: 94% !important; } .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm { padding: 10px; /* Reduzierter Innenabstand */ } /* Kompaktere Abstände für Mobilgeräte */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .sc-inner { padding: 0; } /* Entfernt unnötige Abstände auf Mobilgeräten */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt { padding: 0; } /* Entfernt unnötige Abstände auf Mobilgeräten */ /* Formular-Elemente */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input:not([type="submit"]), .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt textarea { font-size: 18px; /* Kleinere Schrift für Mobile */ } /* Kleinere Schriftgrößen für Mobilgeräte */ /* Beschriftungen */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-title { font-size: 16px; letter-spacing: 0.6px; } /* Angepasste Feld-Überschriften für Mobilgeräte */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-input { font-size: 24px !important; } /* Angepasste Eingabefeld-Labels für Mobilgeräte */ /* Submit-Button */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .submit-btn, .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input[type="submit"] { width: 100%; /* Button volle Breite */ max-width: none; /* Keine maximale Breite */ font-size: 24px; /* Angepasste Schriftgröße */ } /* Volle Breite für Submit-Button auf Mobilgeräten */ } /* Landscape-Modus (Querformat) ========================================================================== */ @media screen and (max-height: 1023px) and (orientation: landscape) { /* Container-Anpassungen */ body .ptsc-list .ptsc.pt-sc.sc-contactForm, body .ptsc-list .ptsc.pt-sc.sc-contactForm .sc-inner, body .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt { padding: 0px; } /* Optimierte Abstände für Landscape-Modus */ /* Feldgruppen */ body .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt [class^="field-group-"] { margin-top: 10px; gap: 4px; } /* Kompaktere Feldgruppen im Landscape-Modus */ /* Submit-Button */ body .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .submit-btn, body .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input[type="submit"] { height: 40px; font-size: 24px; } /* Angepasster Submit-Button im Landscape-Modus */ } /* Tablet (max-width: 768px) ========================================================================== */ @media screen and (max-width: 768px) { #kontakt-grotec-id .wpcf7-form .grotec-kontakt { margin-top: 0px; /* Entfernt äußere Abstände */ padding: 0; /* Entfernt innere Abstände */ font-weight: 300; /* Setzt leichte Schriftstärke */ font-family: 'mundial-narrow-variable', sans-serif; /* Setzt die korrekte Schriftart */ width: 100%; /* Nutzt volle verfügbare Breite */ box-sizing: border-box; /* Inkludiert Padding in Breitenberechnung */ height: auto; overflow: visible; /* Höhe von dem Kntaktblock 71vh */ } /* Container-Struktur */ .m-mode .ptsc-list.pt-hs-content { width: 100% !important; /* Volle Breite erzwingen */ max-width: 100% !important; /* Maximale Breite begrenzen */ margin: 0 !important; /* Außenabstände entfernen */ padding: 0 !important; /* Innenabstände entfernen */ overflow-x: hidden !important; /* Horizontales Scrollen verhindern */ box-sizing: border-box !important; /* Korrekte Breitenberechnung */ left: 0 !important; /* Linksbündig ausrichten */ right: 0 !important; /* Rechtsbündig ausrichten */ position: relative !important; /* Relative Positionierung */ } /* Container-Anpassungen für Tablets */ .m-mode .ptsc-list.pt-hs-content > .wrap { width: 100% !important; padding: 0 !important; margin: 0 !important; left: 0 !important; } /* Wrapper-Anpassungen für Tablets */ /* Formular-Container */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm { width: 100% !important; margin: 0 !important; padding: 15px !important; left: 0 !important; position: relative !important; } /* Formular-Container für Tablets */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .sc-inner { width: 100% !important; padding: 0 !important; margin: 0 !important; position: relative !important; } /* Formular-Container für Tablets */ /* Formular-Elemente */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt { width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Formular-Elemente für Tablets */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input:not([type="submit"]), .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt textarea { font-size: 20px; /* Angepasste Schriftgröße für Tablets */ } /* Angepasste Schriftgrößen für Tablets */ /* Beschriftungen */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-title { font-size: 16px; } /* Angepasste Feld-Überschriften für Tablets */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-input { font-size: 24px !important; } /* Angepasste Eingabefeld-Labels für Tablets */ } /* Große Smartphones (max-width: 640px) ========================================================================== */ @media screen and (max-width: 640px) { #kontakt-grotec-id .wpcf7-form .grotec-kontakt { margin-top: 0px; /* Entfernt äußere Abstände */ padding: 0; /* Entfernt innere Abstände */ font-weight: 300; /* Setzt leichte Schriftstärke */ font-family: 'mundial-narrow-variable', sans-serif; /* Setzt die korrekte Schriftart */ width: 100%; /* Nutzt volle verfügbare Breite */ box-sizing: border-box; /* Inkludiert Padding in Breitenberechnung */ height: auto; overflow: visible; /* Höhe von dem Kntaktblock 71vh */ } /* Container-Struktur */ .m-mode .ptsc-list.pt-hs-content { width: 100% !important; /* Volle Breite erzwingen */ max-width: 100% !important; /* Maximale Breite begrenzen */ margin: 0 !important; /* Außenabstände entfernen */ padding: 0 !important; /* Innenabstände entfernen */ overflow-x: hidden !important; /* Horizontales Scrollen verhindern */ box-sizing: border-box !important; /* Korrekte Breitenberechnung */ left: 0 !important; /* Linksbündig ausrichten */ right: 0 !important; /* Rechtsbündig ausrichten */ position: relative !important; /* Relative Positionierung */ } /* Container-Anpassungen für große Smartphones */ .m-mode .ptsc-list.pt-hs-content > .wrap { width: 100% !important; padding: 0 !important; margin: 0 !important; left: 0 !important; } /* Wrapper-Anpassungen für große Smartphones */ /* Formular-Container */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm { width: 100% !important; margin: 0 !important; padding: 12px !important; left: 0 !important; position: relative !important; } /* Formular-Container für große Smartphones */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .sc-inner { width: 100% !important; padding: 0 !important; margin: 0 !important; position: relative !important; } /* Formular-Container für große Smartphones */ /* Formular-Elemente */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt { width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Formular-Elemente für große Smartphones */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input:not([type="submit"]), .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt textarea { font-size: 19px; /* Angepasste Schriftgröße für große Smartphones */ } /* Angepasste Schriftgrößen für große Smartphones */ /* Beschriftungen */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-title { font-size: 16px; } /* Angepasste Feld-Überschriften für große Smartphones */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-input { font-size: 19px !important; } /* Angepasste Eingabefeld-Labels für große Smartphones */ } /* Smartphone (max-width: 480px) ========================================================================== */ @media screen and (max-width: 480px) { #kontakt-grotec-id .wpcf7-form .grotec-kontakt { margin-top: 0px; /* Entfernt äußere Abstände */ padding: 0; /* Entfernt innere Abstände */ font-weight: 300; /* Setzt leichte Schriftstärke */ font-family: 'mundial-narrow-variable', sans-serif; /* Setzt die korrekte Schriftart */ width: 100%; /* Nutzt volle verfügbare Breite */ box-sizing: border-box; /* Inkludiert Padding in Breitenberechnung */ height: auto; overflow: visible; /* Höhe von dem Kntaktblock 71vh */ } /* Container und Abstände */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm { padding: 10px !important; /* Reduzierter Innenabstand */ } /* Kompaktere Abstände für Mobilgeräte */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .sc-inner { padding: 0 !important; } /* Entfernt unnötige Abstände auf Mobilgeräten */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt { padding: 0 !important; } /* Entfernt unnötige Abstände auf Mobilgeräten */ /* Formular-Elemente */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input:not([type="submit"]), .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt textarea { font-size: 18px; /* Kleinere Schrift für Mobile */ } /* Kleinere Schriftgrößen für Mobilgeräte */ /* Beschriftungen */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-title { font-size: 16px; letter-spacing: 0.6px; } /* Angepasste Feld-Überschriften für Mobilgeräte */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-input { font-size: 24px !important; } /* Angepasste Eingabefeld-Labels für Mobilgeräte */ /* Submit-Button */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .submit-btn, .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input[type="submit"] { width: 100%; /* Button volle Breite */ max-width: none; /* Keine maximale Breite */ font-size: 24px; /* Angepasste Schriftgröße */ } /* Volle Breite für Submit-Button auf Mobilgeräten */ } /* Kleine Smartphones (max-width: 320px) ========================================================================== */ @media screen and (max-width: 320px) { #kontakt-grotec-id .wpcf7-form .grotec-kontakt { margin-top: 0px; /* Entfernt äußere Abstände */ padding: 0; /* Entfernt innere Abstände */ font-weight: 300; /* Setzt leichte Schriftstärke */ font-family: 'mundial-narrow-variable', sans-serif; /* Setzt die korrekte Schriftart */ width: 100%; /* Nutzt volle verfügbare Breite */ box-sizing: border-box; /* Inkludiert Padding in Breitenberechnung */ height: auto; overflow: visible; /* Höhe von dem Kntaktblock 71vh */ } /* Container und Abstände */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm { padding: 8px !important; /* Minimaler Innenabstand */ } /* Sehr kompakte Abstände für kleine Mobilgeräte */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .sc-inner { padding: 0 !important; } /* Entfernt unnötige Abstände auf kleinen Mobilgeräten */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt { padding: 0 !important; } /* Entfernt unnötige Abstände auf kleinen Mobilgeräten */ /* Formular-Elemente */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input:not([type="submit"]), .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt textarea { font-size: 16px; /* Kleine Schrift für kleine Mobile */ } /* Kleinere Schriftgrößen für kleine Mobilgeräte */ /* Beschriftungen */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-title { font-size: 14px; letter-spacing: 0.5px; } /* Angepasste Feld-Überschriften für kleine Mobilgeräte */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .label-input { font-size: 16px !important; } /* Angepasste Eingabefeld-Labels für kleine Mobilgeräte */ /* Submit-Button */ .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt .submit-btn, .m-mode .ptsc-list .ptsc.pt-sc.sc-contactForm .wpcf7-form .grotec-kontakt input[type="submit"] { width: 100%; /* Button volle Breite */ max-width: none; /* Keine maximale Breite */ font-size: 16px; /* Kleinere Schriftgröße für kleine Geräte */ } /* Volle Breite für Submit-Button auf kleinen Mobilgeräten */ } /* ========================================================================== 8. BROWSER-KOMPATIBILITÄT & SPEZIELLE ANPASSUNGEN ========================================================================== */ /* Kalender-Icon Styling */ .wpcf7-form .grotec-kontakt input[type="date"]::-webkit-calendar-picker-indicator { filter: none; cursor: pointer; } /* Basis-Styling für das Kalender-Icon im Light Mode */ /* Dark Mode - Weißes Kalender-Icon */ .site-dark .wpcf7-form .grotec-kontakt input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); } /* Invertiert die Farbe des Icons im Dark Mode zu Weiß */ /* Firefox Spezifische Anpassungen */ @-moz-document url-prefix() { .wpcf7-form .grotec-kontakt input[type="date"] { position: relative; -moz-appearance: none; } /* Entfernt Standard Firefox Datepicker-Styling */ .wpcf7-form .grotec-kontakt input[type="date"]::-moz-calendar-picker-indicator { background: transparent; cursor: pointer; position: absolute; top: 0; right: 0; bottom: 0; width: 30px; } /* Positioniert und stylt den Firefox Datepicker */ } /* Safari/iOS Spezifische Anpassungen */ @supports (-webkit-touch-callout: none) { .wpcf7-form .grotec-kontakt input[type="date"] { -webkit-appearance: none; display: inline-flex; } /* Optimiert die Darstellung für Safari und iOS Geräte */ } /* Edge Spezifische Anpassungen */ @supports (-ms-ime-align: auto) { .wpcf7-form .grotec-kontakt input[type="date"]::-ms-clear, .wpcf7-form .grotec-kontakt input[type="date"]::-ms-reveal { display: none; } /* Entfernt Standard Edge Clear-Buttons */ } /* Internet Explorer Fallback */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .wpcf7-form .grotec-kontakt input[type="date"] { position: relative; padding-right: 35px; } /* Korrigiert die Darstellung im Internet Explorer */ } /* Mobile Anpassungen für Touch-Geräte */ @media (hover: none) and (pointer: coarse) { .wpcf7-form .grotec-kontakt input[type="date"] { font-size: 16px !important; min-height: 44px; } /* Verhindert iOS Zoom und verbessert Touch-Bedienung */ .wpcf7-form .grotec-kontakt input[type="date"]::-webkit-calendar-picker-indicator { width: 44px; height: 44px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } /* Vergrößert das Kalender-Icon für Touch-Geräte */ } /* Allgemeine Browser-Kompatibilitäts-Fixes */ .wpcf7-form .grotec-kontakt { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } /* Verbessert die Textdarstellung über alle Browser */ /* Flexbox Fallbacks für ältere Browser */ .wpcf7-form .grotec-kontakt .form, .wpcf7-form .grotec-kontakt .form-fields, .wpcf7-form .grotec-kontakt [class^="field-group-"] { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; } /* Stellt Flexbox-Kompatibilität für ältere Browser sicher */ /* Transition Fallbacks */ .wpcf7-form .grotec-kontakt input:not([type="submit"]), .wpcf7-form .grotec-kontakt textarea, .wpcf7-form .grotec-kontakt select, .wpcf7-form .grotec-kontakt .submit-btn { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /* Gewährleistet sanfte Übergänge in allen Browsern */ /* Box-Sizing Fallbacks */ .wpcf7-form .grotec-kontakt *, .wpcf7-form .grotec-kontakt *:before, .wpcf7-form .grotec-kontakt *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* Einheitliche Box-Berechnung über alle Browser */ /* Placeholder Opacity Fix für Firefox */ .wpcf7-form .grotec-kontakt input::-moz-placeholder, .wpcf7-form .grotec-kontakt textarea::-moz-placeholder { opacity: 1; } /* Korrigiert Placeholder-Transparenz in Firefox */ /* Input Autofill Styling */ .wpcf7-form .grotec-kontakt input:-webkit-autofill, .wpcf7-form .grotec-kontakt input:-webkit-autofill:hover, .wpcf7-form .grotec-kontakt input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px transparent inset; transition: background-color 5000s ease-in-out 0s; } /* Verhindert unerwünschte Autofill-Hintergrundfarben */ /* ================================ KONTAKTFORMULAR FLUID DESIGN EXTENSION Für Desktop-Auflösungen 1024px - 2560px Basis: 1920x1080 (bleibt unverändert) Mobile CSS (max-width: 1023px) bleibt unverändert ================================ */ /* Fluid Design Variables für Kontaktformular */ :root { /* Kontaktformular Typography Scale */ --kontakt-label-title-font: clamp(14px, 1.2vw, 18px); /* 14px - 18px */ --kontakt-label-input-font: clamp(18px, 1.8vw, 24px); /* 18px - 24px (Basis: 22px bei 1920px) */ --kontakt-placeholder-font: clamp(18px, 1.8vw, 24px); /* 18px - 24px (Basis: 22px bei 1920px) */ --kontakt-submit-font: clamp(16px, 1.6vw, 20px); /* 16px - 20px */ /* Kontaktformular Spacing Scale */ --kontakt-container-padding: clamp(15px, 2vw, 30px); /* 15px - 30px */ --kontakt-field-margin: clamp(8px, 1.2vw, 18px); /* 8px - 18px */ --kontakt-input-padding-v: clamp(8px, 1.2vw, 16px); /* 8px - 16px */ --kontakt-input-padding-h: clamp(12px, 1.6vw, 22px); /* 12px - 22px */ --kontakt-label-margin-top: clamp(2px, 0.3vw, 6px); /* 2px - 6px */ --kontakt-submit-padding-v: clamp(10px, 1.2vw, 16px); /* 10px - 16px */ --kontakt-submit-padding-h: clamp(20px, 2.5vw, 32px); /* 20px - 32px */ /* Kontaktformular Layout Dimensions */ --kontakt-form-max-width: clamp(600px, 70vw, 800px); /* 600px - 800px */ --kontakt-input-min-height: clamp(40px, 4vw, 55px); /* 40px - 55px */ --kontakt-textarea-min-height: clamp(80px, 8vw, 130px); /* 80px - 130px */ --kontakt-submit-min-height: clamp(40px, 4vw, 52px); /* 40px - 52px */ --kontakt-container-height: clamp(65vh, 71vh, 75vh); /* 65vh - 75vh */ --kontakt-border-radius: clamp(4px, 0.5vw, 8px); /* 4px - 8px */ } /* Desktop-only Fluid Anpassungen für Kontaktformular (1024px - 2560px) */ @media screen and (min-width: 1024px) { /* Container Fluid Sizing */ .wpcf7-form .grotec-kontakt { height: var(--kontakt-container-height); max-width: var(--kontakt-form-max-width); padding: var(--kontakt-container-padding); font-family: "mundial-narrow-variable", sans-serif; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; } /* Form Container */ .wpcf7-form .grotec-kontakt .form { height: auto; flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; } /* Form Fields Container */ .wpcf7-form .grotec-kontakt .form-fields { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; gap: var(--kontakt-field-margin); overflow: hidden; } /* Field Groups Fluid Spacing */ .wpcf7-form .grotec-kontakt [class^="field-group-"] { margin-bottom: var(--kontakt-field-margin); flex-shrink: 0; } /* Label Titles Fluid Typography */ .wpcf7-form .grotec-kontakt .label-title { font-size: var(--kontakt-label-title-font); font-weight: 300; font-family: 'mundial-narrow-variable', sans-serif; line-height: 1.4; } /* Input Fields Fluid Styling */ .wpcf7-form .grotec-kontakt input:not([type="submit"]), .wpcf7-form .grotec-kontakt textarea { font-size: var(--kontakt-label-input-font); font-weight: 300; padding: var(--kontakt-input-padding-v) var(--kontakt-input-padding-h); min-height: var(--kontakt-input-min-height); border-radius: var(--kontakt-border-radius); font-family: 'mundial-narrow-variable', sans-serif; box-sizing: border-box; } /* Textarea spezifische Höhe */ .wpcf7-form .grotec-kontakt textarea { min-height: var(--kontakt-textarea-min-height); resize: none; overflow-y: auto; } /* Textarea komplett linksbündig ohne Abstände */ .wpcf7-form .grotec-kontakt textarea.label-input { padding-left: 0 !important; margin-left: 0 !important; text-align: left; border-left: none; } .wpcf7-form .grotec-kontakt textarea::placeholder { padding-left: 0 !important; text-align: left; } /* Label Input Styling */ .wpcf7-form .grotec-kontakt .label-input { font-size: var(--kontakt-label-input-font); margin-top: var(--kontakt-label-margin-top); font-family: 'mundial-narrow-variable', sans-serif; } /* Placeholder Fluid Typography */ .wpcf7-form .grotec-kontakt input::placeholder, .wpcf7-form .grotec-kontakt textarea::placeholder { font-size: var(--kontakt-placeholder-font) !important; font-weight: 300; font-family: 'mundial-narrow-variable', sans-serif; } .wpcf7-form .grotec-kontakt input::-webkit-input-placeholder, .wpcf7-form .grotec-kontakt textarea::-webkit-input-placeholder { font-size: var(--kontakt-placeholder-font) !important; font-weight: 300; } .wpcf7-form .grotec-kontakt input::-moz-placeholder, .wpcf7-form .grotec-kontakt textarea::-moz-placeholder { font-size: var(--kontakt-placeholder-font) !important; font-weight: 300; } /* Submit Button Fluid Styling */ .wpcf7-form .grotec-kontakt .submit-btn { font-size: var(--kontakt-submit-font); padding: var(--kontakt-submit-padding-v) var(--kontakt-submit-padding-h); min-height: var(--kontakt-submit-min-height); border-radius: var(--kontakt-border-radius); font-weight: 300; font-family: 'mundial-narrow-variable', sans-serif; margin-top: var(--kontakt-field-margin); } } /* Spezielle Anpassungen für 1024×768 (sehr wichtig!) */ @media screen and (min-width: 1024px) and (max-width: 1024px) { :root { --kontakt-container-height: 68vh; --kontakt-field-margin: clamp(6px, 0.8vw, 10px); --kontakt-input-padding-v: clamp(6px, 0.8vw, 10px); --kontakt-input-padding-h: clamp(10px, 1.2vw, 16px); --kontakt-input-min-height: clamp(35px, 3.5vw, 42px); --kontakt-textarea-min-height: clamp(65px, 6.5vw, 85px); --kontakt-submit-min-height: clamp(35px, 3.5vw, 42px); } .wpcf7-form .grotec-kontakt { max-width: clamp(500px, 60vw, 650px); padding: clamp(10px, 1.5vw, 20px); margin-left: 150px; } .wpcf7-form .grotec-kontakt .label-title { font-size: clamp(12px, 1.1vw, 15px); line-height: 1.3; } .wpcf7-form .grotec-kontakt input:not([type="submit"]), .wpcf7-form .grotec-kontakt textarea, .wpcf7-form .grotec-kontakt .label-input { font-size: clamp(16px, 1.5vw, 19px); } .wpcf7-form .grotec-kontakt textarea.label-input { padding-left: 0 !important; margin-left: 0 !important; } .wpcf7-form .grotec-kontakt .submit-btn { font-size: clamp(14px, 1.3vw, 17px); } } /* Spezielle Anpassungen für 1025px - 1279px (1280×1024) */ @media screen and (min-width: 1025px) and (max-width: 1279px) { :root { --kontakt-container-height: 69vh; --kontakt-field-margin: clamp(8px, 1vw, 12px); --kontakt-input-min-height: clamp(38px, 3.8vw, 45px); --kontakt-textarea-min-height: clamp(75px, 7.5vw, 95px); --kontakt-submit-min-height: clamp(38px, 3.8vw, 45px); } .wpcf7-form .grotec-kontakt { max-width: clamp(550px, 65vw, 700px); padding: clamp(12px, 1.8vw, 25px); } .wpcf7-form .grotec-kontakt .label-title { font-size: clamp(13px, 1.1vw, 16px); } .wpcf7-form .grotec-kontakt input:not([type="submit"]), .wpcf7-form .grotec-kontakt textarea, .wpcf7-form .grotec-kontakt .label-input { font-size: clamp(17px, 1.6vw, 20px); } .wpcf7-form .grotec-kontakt textarea.label-input { padding-left: 0 !important; margin-left: 0 !important; } .wpcf7-form .grotec-kontakt .submit-btn { font-size: clamp(15px, 1.4vw, 18px); } } /* Spezielle Anpassungen für 1280px - 1359px (1360×768) */ @media screen and (min-width: 1280px) and (max-width: 1359px) { :root { --kontakt-container-height: 70vh; --kontakt-field-margin: clamp(10px, 1.2vw, 14px); --kontakt-input-min-height: clamp(40px, 4vw, 48px); --kontakt-textarea-min-height: clamp(80px, 8vw, 105px); --kontakt-submit-min-height: clamp(40px, 4vw, 48px); } .wpcf7-form .grotec-kontakt { max-width: clamp(600px, 68vw, 750px); padding: clamp(15px, 2vw, 28px); } .wpcf7-form .grotec-kontakt .label-title { font-size: clamp(14px, 1.15vw, 17px); } .wpcf7-form .grotec-kontakt input:not([type="submit"]), .wpcf7-form .grotec-kontakt textarea, .wpcf7-form .grotec-kontakt .label-input { font-size: clamp(18px, 1.7vw, 21px); } .wpcf7-form .grotec-kontakt textarea.label-input { padding-left: 0 !important; margin-left: 0 !important; } .wpcf7-form .grotec-kontakt .submit-btn { font-size: clamp(16px, 1.5vw, 19px); } } /* Spezielle Anpassungen für 1360px - 1399px (1366×768 - sehr wichtig!) */ @media screen and (min-width: 1360px) and (max-width: 1399px) { :root { --kontakt-container-height: 65vh; --kontakt-field-margin: clamp(4px, 0.6vw, 8px); --kontakt-input-padding-v: clamp(5px, 0.7vw, 9px); --kontakt-input-padding-h: clamp(8px, 1vw, 14px); --kontakt-input-min-height: clamp(32px, 3.2vw, 38px); --kontakt-textarea-min-height: clamp(55px, 5.5vw, 75px); --kontakt-submit-min-height: clamp(32px, 3.2vw, 38px); } #kontakt-grotec-id .wpcf7-form .grotec-kontakt { margin-top: 0px; /* Entfernt äußere Abstände */ padding: 0; /* Entfernt innere Abstände */ font-weight: 300; /* Setzt leichte Schriftstärke */ font-family: 'mundial-narrow-variable', sans-serif; /* Setzt die korrekte Schriftart */ width: 100%; /* Nutzt volle verfügbare Breite */ box-sizing: border-box; /* Inkludiert Padding in Breitenberechnung */ height: 72vh; overflow: hidden; /* Höhe von dem Kntaktblock 71vh */ } #kontakt-grotec-id .wpcf7-form .grotec-kontakt .label-input { margin: 0 0 0 0; /* Kein Abstand zwischen label-title und label-input */ padding: 0; /* Kein Padding */ line-height: 2; /* Kompakte Zeilenhöhe */ min-width: 149%; /*! min-height: 17%; */ } .wpcf7-form .grotec-kontakt .label-title { font-size: clamp(11px, 1vw, 14px); line-height: 1.2; margin-bottom: clamp(3px, 0.5vw, 6px); } .wpcf7-form .grotec-kontakt input:not([type="submit"]), .wpcf7-form .grotec-kontakt textarea, .wpcf7-form .grotec-kontakt .label-input { font-size: clamp(14px, 1.3vw, 17px); } .wpcf7-form .grotec-kontakt textarea.label-input { padding-left: 0 !important; margin-left: 0 !important; } .wpcf7-form .grotec-kontakt .submit-btn { font-size: clamp(13px, 1.2vw, 16px); padding: clamp(5px, 0.7vw, 9px) clamp(16px, 2vw, 24px); } } /* Spezielle Anpassungen für 1400px - 1679px (1440×900 - sehr wichtig!) */ @media screen and (min-width: 1400px) and (max-width: 1679px) { :root { --kontakt-container-height: 65vh; --kontakt-field-margin: clamp(4px, 0.6vw, 8px); --kontakt-input-padding-v: clamp(5px, 0.7vw, 9px); --kontakt-input-padding-h: clamp(8px, 1vw, 14px); --kontakt-input-min-height: clamp(32px, 3.2vw, 38px); --kontakt-textarea-min-height: clamp(55px, 5.5vw, 75px); --kontakt-submit-min-height: clamp(32px, 3.2vw, 38px); } #kontakt-grotec-id .wpcf7-form .grotec-kontakt { margin-top: 0px; /* Entfernt äußere Abstände */ padding: 0; /* Entfernt innere Abstände */ font-weight: 300; /* Setzt leichte Schriftstärke */ font-family: 'mundial-narrow-variable', sans-serif; /* Setzt die korrekte Schriftart */ width: 100%; /* Nutzt volle verfügbare Breite */ box-sizing: border-box; /* Inkludiert Padding in Breitenberechnung */ height: 72vh; overflow: hidden; /* Höhe von dem Kntaktblock 71vh */ } #kontakt-grotec-id .wpcf7-form .grotec-kontakt .label-input { margin: 0 0 0 0; /* Kein Abstand zwischen label-title und label-input */ padding: 0; /* Kein Padding */ line-height: 2; /* Kompakte Zeilenhöhe */ min-width: 149%; /*! min-height: 17%; */ } .wpcf7-form .grotec-kontakt .label-title { font-size: clamp(11px, 1vw, 14px); line-height: 1.2; margin-bottom: clamp(3px, 0.5vw, 6px); } .wpcf7-form .grotec-kontakt input:not([type="submit"]), .wpcf7-form .grotec-kontakt textarea, .wpcf7-form .grotec-kontakt .label-input { font-size: clamp(14px, 1.3vw, 17px); } .wpcf7-form .grotec-kontakt textarea.label-input { padding-left: 0 !important; margin-left: 0 !important; } .wpcf7-form .grotec-kontakt .submit-btn { font-size: clamp(13px, 1.2vw, 16px); padding: clamp(5px, 0.7vw, 9px) clamp(16px, 2vw, 24px); } } /* Spezielle Anpassungen für 1680px - 1919px */ @media screen and (min-width: 1680px) and (max-width: 1919px) { :root { --kontakt-container-height: 65vh; --kontakt-field-margin: clamp(4px, 0.6vw, 8px); --kontakt-input-padding-v: clamp(5px, 0.7vw, 9px); --kontakt-input-padding-h: clamp(8px, 1vw, 14px); --kontakt-input-min-height: clamp(32px, 3.2vw, 38px); --kontakt-textarea-min-height: clamp(55px, 5.5vw, 75px); --kontakt-submit-min-height: clamp(32px, 3.2vw, 38px); } #kontakt-grotec-id .wpcf7-form .grotec-kontakt { margin-top: 0px; /* Entfernt äußere Abstände */ padding: 0; /* Entfernt innere Abstände */ font-weight: 300; /* Setzt leichte Schriftstärke */ font-family: 'mundial-narrow-variable', sans-serif; /* Setzt die korrekte Schriftart */ width: 100%; /* Nutzt volle verfügbare Breite */ box-sizing: border-box; /* Inkludiert Padding in Breitenberechnung */ height: 72vh; overflow: hidden; /* Höhe von dem Kntaktblock 71vh */ } #kontakt-grotec-id .wpcf7-form .grotec-kontakt .label-input { margin: 0 0 0 0; /* Kein Abstand zwischen label-title und label-input */ padding: 0; /* Kein Padding */ line-height: 2; /* Kompakte Zeilenhöhe */ min-width: 149%; /*! min-height: 17%; */ } .wpcf7-form .grotec-kontakt .label-title { font-size: clamp(11px, 1vw, 14px); line-height: 1.2; margin-bottom: clamp(3px, 0.5vw, 6px); } .wpcf7-form .grotec-kontakt input:not([type="submit"]), .wpcf7-form .grotec-kontakt textarea, .wpcf7-form .grotec-kontakt .label-input { font-size: clamp(14px, 1.3vw, 17px); } .wpcf7-form .grotec-kontakt textarea.label-input { padding-left: 0 !important; margin-left: 0 !important; } .wpcf7-form .grotec-kontakt .submit-btn { font-size: clamp(13px, 1.2vw, 16px); padding: clamp(5px, 0.7vw, 9px) clamp(16px, 2vw, 24px); } } /* Spezielle Anpassungen für sehr große Bildschirme (2560×1440+) */ @media screen and (min-width: 2560px) { :root { --kontakt-container-height: 72vh; --kontakt-field-margin: min(20px, 1.8vw); --kontakt-input-min-height: min(60px, 5.5vw); --kontakt-textarea-min-height: min(140px, 12vw); --kontakt-submit-min-height: min(55px, 5vw); --kontakt-container-padding: min(40px, 3vw); --kontakt-input-padding-v: min(18px, 1.6vw); --kontakt-input-padding-h: min(28px, 2.4vw); --kontakt-submit-padding-v: min(16px, 1.4vw); --kontakt-submit-padding-h: min(38px, 3.2vw); --kontakt-border-radius: min(10px, 0.8vw); } .wpcf7-form .grotec-kontakt { max-width: min(900px, 70vw); } .wpcf7-form .grotec-kontakt .label-title { font-size: min(20px, 1.3vw); font-weight: 300; line-height: 1.4; } .wpcf7-form .grotec-kontakt input:not([type="submit"]), .wpcf7-form .grotec-kontakt textarea, .wpcf7-form .grotec-kontakt .label-input { font-size: min(26px, 1.9vw); font-weight: 300; } .wpcf7-form .grotec-kontakt textarea.label-input { padding-left: 0 !important; margin-left: 0 !important; } .wpcf7-form .grotec-kontakt input::placeholder, .wpcf7-form .grotec-kontakt textarea::placeholder, .wpcf7-form .grotec-kontakt input::-webkit-input-placeholder, .wpcf7-form .grotec-kontakt textarea::-webkit-input-placeholder, .wpcf7-form .grotec-kontakt input::-moz-placeholder, .wpcf7-form .grotec-kontakt textarea::-moz-placeholder { font-size: min(26px, 1.9vw) !important; font-weight: 300; } .wpcf7-form .grotec-kontakt .submit-btn { font-size: min(22px, 1.6vw); font-weight: 300; } .wpcf7-form .grotec-kontakt .label-input { margin-top: min(8px, 0.6vw); } } /* Ende Kontaktformular Fluid Design Extension */