/* * VL-Tool - Auftragsformular, Erscheinungsbild "Elegant" (V2.9.402) * ================================================================= * * Diese Datei wird NUR geladen, wenn unter * VL-Einstellungen -> Design -> "Auftragsformular - Erscheinungsbild" * die Einstellung "Elegant" gewaehlt ist. Ohne diese Einstellung * aendert sich am Formular gar nichts. * * Grundsatz: Hier steht ausschliesslich Optik - Farbe, Abstand, Breite, * Zustandsdarstellung. Kein einziges Feld wird verschoben, umbenannt, * ausgeblendet oder in seiner Bedienung veraendert. Die Tabulator-Kette, * die Pflichtfeld-Regeln, die Auswahllisten und das Handy-Verhalten * bleiben unangetastet. * * Die Regeln, die die Markenfarbe brauchen (Fokusrahmen, Ja/Nein- * Schalter, Abschnittskante), stehen NICHT hier, sondern werden in * cockpit.php erzeugt - dort ist die eingestellte Farbe bekannt. * Siehe vlt_brand_inline_css_order_form_elegant(). * * Zurueckschalten: Einstellung wieder auf "Klassisch" - fertig. */ /* ------------------------------------------------------------------ * 1. Feldkontrast - vier Spielarten * * Erste Fassung war weiss auf weiss. Das war ein Fehler: Kontrast muss * von irgendwo kommen. Vorher kam er aus dem gruenen Feld - ihn * ersatzlos zu streichen liess das Formular wie ein leeres Blatt * wirken, man fand die Felder kaum. * * Deshalb jetzt vier Wege, waehlbar unter * VL-Einstellungen -> Design -> "Auftragsformular - Erscheinungsbild": * * A "hell" Kasten leicht getoent, Felder weiss. Die Felder sind * das Hellste auf der Seite und laden zum Schreiben ein. * B "getoent" Kasten weiss, Felder leicht getoent. Sehr ruhig. * C "kontur" Alles weiss, dafuer kraeftigere Feldkontur. * D "gruen" Das gewohnte Gruen behalten - nur mit den * aufgeraeumten Breiten und Abstaenden. Das Feld im * Fokus wird weiss und sticht dadurch heraus. * * Die Klasse am body heisst jeweils vlt-form-elegant plus * vlt-form-. Das !important ist noetig, weil die * Branding-Regeln aus cockpit.php ihre Feldfarben ebenfalls mit * !important setzen; diese Datei wird danach geladen und gewinnt. * ------------------------------------------------------------------ */ /* Gemeinsame Grundlage aller vier: gleiche Ecken, gleicher Uebergang. */ body.vlt-form-elegant #vlt-order-form .vlt-field input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-elegant #vlt-order-form .vlt-field select, body.vlt-form-elegant #vlt-order-form .vlt-field textarea, body.vlt-form-elegant #vlt-order-form .vlt-required input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-elegant #vlt-order-form .vlt-required select, body.vlt-form-elegant #vlt-order-form .vlt-required textarea { border-radius: 7px !important; transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; } /* --- A: getoenter Kasten, weisse Felder ---------------------------- */ body.vlt-form-hell #vlt-order-form .vlt-form-section { background: #f4f6f3; border-color: #e2e6e0; } body.vlt-form-hell #vlt-order-form .vlt-field input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-hell #vlt-order-form .vlt-field select, body.vlt-form-hell #vlt-order-form .vlt-field textarea, body.vlt-form-hell #vlt-order-form .vlt-required input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-hell #vlt-order-form .vlt-required select, body.vlt-form-hell #vlt-order-form .vlt-required textarea { background: #ffffff !important; border: 1px solid #c9cdc6 !important; } /* --- B: weisser Kasten, getoente Felder ---------------------------- */ body.vlt-form-getoent #vlt-order-form .vlt-form-section { background: #ffffff; border-color: #e8ece7; } body.vlt-form-getoent #vlt-order-form .vlt-field input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-getoent #vlt-order-form .vlt-field select, body.vlt-form-getoent #vlt-order-form .vlt-field textarea, body.vlt-form-getoent #vlt-order-form .vlt-required input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-getoent #vlt-order-form .vlt-required select, body.vlt-form-getoent #vlt-order-form .vlt-required textarea { background: #f3f5f1 !important; border: 1px solid #dcdfd8 !important; } /* --- C: alles weiss, kraeftige Kontur ------------------------------ */ body.vlt-form-kontur #vlt-order-form .vlt-form-section { background: #ffffff; border-color: #e8ece7; } body.vlt-form-kontur #vlt-order-form .vlt-field input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-kontur #vlt-order-form .vlt-field select, body.vlt-form-kontur #vlt-order-form .vlt-field textarea, body.vlt-form-kontur #vlt-order-form .vlt-required input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-kontur #vlt-order-form .vlt-required select, body.vlt-form-kontur #vlt-order-form .vlt-required textarea { background: #ffffff !important; border: 1.5px solid #9ea49b !important; } /* --- D: das gewohnte Gruen behalten -------------------------------- * * Hier wird die Feldfarbe NICHT angefasst - sie kommt weiter aus den * Branding-Einstellungen (Design -> Auftragsformular - Felder). Nur * Kasten, Breiten, Abstaende und der weisse Fokus kommen dazu. */ body.vlt-form-gruen #vlt-order-form .vlt-form-section { background: #ffffff; border-color: #e0e9e2; } /* Fachberater 2 und Telefon 2 sind optional und tragen heute einen * gelben Hinweiston. In den drei ruhigen Spielarten deutlich * zurueckgenommen; bei "gruen" bleibt alles wie gewohnt. */ body.vlt-form-hell #vlt-order-form #vlt-fb2, body.vlt-form-hell #vlt-order-form #vlt-phone2, body.vlt-form-getoent #vlt-order-form #vlt-fb2, body.vlt-form-getoent #vlt-order-form #vlt-phone2, body.vlt-form-kontur #vlt-order-form #vlt-fb2, body.vlt-form-kontur #vlt-order-form #vlt-phone2 { background: #fcfbf6 !important; border-color: #e2ded0 !important; } /* --- E: "Cockpit" -------------------------------------------------- * * Greift die Bildsprache des Cockpits auf: weisse Karten mit weichem * Schatten statt Rahmen, gruen getoente Felder im Ton der * Cockpit-Knoepfe, kleine graue Versalien als Abschnittsbeschriftung, * grosszuegigere Ecken. * * Der Gedanke dahinter: Wer aus dem Cockpit ins Auftragsformular * wechselt, soll nicht das Gefuehl haben, das Programm gewechselt zu * haben. Die Feldfarben selbst kommen aus der Markenfarbe und stehen * deshalb in cockpit.php. */ body.vlt-form-elegant.vlt-form-cockpit #vlt-order-form .vlt-form-section { border: 0 !important; border-radius: 16px; background: #ffffff; box-shadow: 0 1px 2px rgba(20, 40, 25, .04), 0 6px 20px rgba(20, 40, 25, .05); padding: 20px 20px 18px; } /* Abschnittstitel wie die Cockpit-Beschriftungen: klein, grau, * gesperrt, in Versalien. Die farbige Kante entfaellt hier - das * Cockpit arbeitet auch ohne. */ body.vlt-form-elegant.vlt-form-cockpit #vlt-order-form .vlt-form-section__title { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #7b8580; } body.vlt-form-elegant.vlt-form-cockpit #vlt-order-form .vlt-form-section__title::before { display: none; } /* Beschriftungen der einzelnen Felder ebenfalls im Cockpit-Ton. */ body.vlt-form-elegant.vlt-form-cockpit #vlt-order-form .vlt-field > label, body.vlt-form-elegant.vlt-form-cockpit #vlt-order-form .vlt-aroundhome legend { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #7b8580; } /* Felder in Cockpit-Knopfform: weiche Ecken, ruhige Flaeche. */ body.vlt-form-cockpit #vlt-order-form .vlt-field input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-cockpit #vlt-order-form .vlt-field select, body.vlt-form-cockpit #vlt-order-form .vlt-field textarea, body.vlt-form-cockpit #vlt-order-form .vlt-required input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-cockpit #vlt-order-form .vlt-required select, body.vlt-form-cockpit #vlt-order-form .vlt-required textarea { border-radius: 12px !important; } /* Auftragsbloecke als eigene helle Karte statt als blauer Rahmen - * so wie die Kacheln im Cockpit nebeneinanderstehen. */ body.vlt-form-elegant.vlt-form-cockpit #vlt-order-form .vlt-contract-row:not([hidden]) { border: 0; border-radius: 14px; background: #f7f9f6; box-shadow: inset 0 0 0 1px rgba(20, 60, 30, .06); padding: 14px 16px; } body.vlt-form-elegant.vlt-form-cockpit #vlt-order-form .vlt-contract-row__title { font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; } /* Anzahl-Kaestchen wie die Cockpit-Knoepfe. */ body.vlt-form-cockpit #vlt-order-form .vlt-count-box { border-radius: 12px; } /* --- F: "Klar" ------------------------------------------------------ * * Der Rahmen sagt, was Sache ist: Pflichtfelder tragen eine * dunkelgruene Kontur, freiwillige eine gelb-orange. Man sieht mit * einem Blick ueber die Seite, was noch ausgefuellt werden MUSS und * was man weglassen darf - ohne die roten Sternchen zu suchen. * * Flaeche bleibt weiss, damit die Konturen wirken koennen. Die * gruene Kontur kommt aus der Markenfarbe und steht deshalb in * cockpit.php; das Orange ist fest, weil es bewusst NICHT zur * Markenfarbe gehoert - es soll sich absetzen. * * Alles andere - Breiten, Abstaende, Kasten, Ja/Nein-Schalter - ist * unveraendert wie in den uebrigen aufgeraeumten Spielarten. */ body.vlt-form-elegant.vlt-form-klar #vlt-order-form .vlt-form-section { background: #ffffff; border-color: #e8ece7; } /* Freiwillige Felder: gelb-orange Kontur, ein Hauch Fuellung. */ body.vlt-form-klar #vlt-order-form .vlt-field:not(.vlt-required) input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-klar #vlt-order-form .vlt-field:not(.vlt-required) select, body.vlt-form-klar #vlt-order-form .vlt-field:not(.vlt-required) textarea { background: #fffdf6 !important; border: 1.5px solid #e0a83c !important; } /* Der gelbe Hinweiston auf Fachberater 2 und Telefon 2 entfaellt hier - * die Kontur sagt dasselbe, ruhiger. */ body.vlt-form-klar #vlt-order-form #vlt-fb2, body.vlt-form-klar #vlt-order-form #vlt-phone2 { background: #fffdf6 !important; border-color: #e0a83c !important; } /* * Das E-Mail-Feld trug bisher einen gelben Hinweiston aus alter Zeit. * In dieser Spielart waere das ein Widerspruch: Gelb heisst hier * "freiwillig" - die E-Mail ist aber Pflicht. Also weisse Flaeche; die * gruene Kontur kommt aus der Pflichtfeld-Regel. * * Setzt jemand den Haken "Kunde hat keine E-Mail", verliert die Huelle * ihre Pflicht-Kennzeichnung und das Feld wird von selbst orange - * genau richtig, denn dann ist es freiwillig. */ body.vlt-form-klar #vlt-order-form .vlt-email-field.vlt-required #vlt-email { background: #ffffff !important; } /* ------------------------------------------------------------------ * 2. Feldbreiten nach Inhalt * * Fuenf Ziffern in einem 30-Zeichen-Feld sehen nach unfertigem * Formular aus. Das Raster bleibt unveraendert - nur die Eingabefelder * selbst bekommen eine Breite, die zu ihrem Inhalt passt. Dadurch * verschiebt sich kein Feld und die Tabulator-Kette bleibt gleich. * * NUR AM GROSSEN BILDSCHIRM. Am Handy und am iPad hoch steht jedes * Feld ohnehin allein in einer Zeile und nutzt die volle Breite - eine * schmale PLZ waere dort kein Gewinn, sondern ein verschenkter Rand. * Die Grenze 768px entspricht der, die das Formular auch sonst fuer * seine Handy-Ansicht benutzt (siehe order-form.css). * * Das !important ist hier Pflicht: order-form.css setzt fuer Felder mit * Loeschkreuz ausdruecklich "max-width: none !important". Und begrenzt * wird die Huelle mit dem Kreuz, nicht nur das Feld - sonst staende das * Kreuz weit rechts neben einem schmalen Feld in der Luft. * ------------------------------------------------------------------ */ @media (min-width: 768px) { body.vlt-form-elegant #vlt-order-form .vlt-field:has(> .vlt-clear-wrap > #vlt-postcode) .vlt-clear-wrap, body.vlt-form-elegant #vlt-order-form #vlt-postcode { max-width: 8.5em !important; } body.vlt-form-elegant #vlt-order-form .vlt-field:has(> .vlt-clear-wrap > #vlt-date) .vlt-clear-wrap, body.vlt-form-elegant #vlt-order-form .vlt-field:has(> .vlt-clear-wrap > #vlt-birthdate) .vlt-clear-wrap, body.vlt-form-elegant #vlt-order-form #vlt-date, body.vlt-form-elegant #vlt-order-form #vlt-birthdate { max-width: 12em !important; } /* * Die Strasse ist das laengste Adressfeld und hatte bisher genauso * viel Platz wie das Datum. Sie bekommt zwei Rasterspalten - und * faengt dabei LINKS an. * * Datum der VB | Kundenname | Kundenvorname * Geburtsdatum | PLZ | Ort * Strasse .................. | Nr. * * V2.9.411 - Korrektur: Kurzzeitig stand die Strasse in den Spalten * 2 und 3, damit die Adresse als geschlossener Block unter PLZ und * Ort steht. Die Idee klang gut, sah aber falsch aus: Links entstand * ein grosses Loch, und ein Loch liest sich nicht als Gliederung, * sondern als vergessenes Feld. Formularzeilen fangen links an - * das ist die Grundregel, und sie schlaegt die schoene Idee. * * Das ist reine Anordnung. Kein Feld wechselt seinen Platz im * Quelltext, die Tabulator-Kette bleibt Zeichen fuer Zeichen * dieselbe. */ body.vlt-form-elegant #vlt-order-form .vlt-order-grid--3 > .vlt-field:has(#vlt-street-name) { grid-column: 1 / span 2; } } /* ------------------------------------------------------------------ * 3. Die Loeschkreuze werden leise * * In jedem Feld sitzt permanent ein Kreuz. Fuenfzehn kleine Kreuze * sind fuenfzehn kleine Stoerungen. Sie erscheinen jetzt erst, wenn * die Maus auf dem Feld liegt oder das Feld den Schreibfleck hat. * * WICHTIG - nur an Geraeten mit echter Maus. Am Handy und am iPad gibt * es kein "Mauszeiger liegt darauf"; dort blieben die Kreuze sonst * unerreichbar. Deshalb die Abfrage auf hover/fine. * ------------------------------------------------------------------ */ @media (hover: hover) and (pointer: fine) { body.vlt-form-elegant #vlt-order-form .vlt-clear-field { opacity: 0 !important; transition: opacity .12s ease; } body.vlt-form-elegant #vlt-order-form .vlt-clear-wrap:hover .vlt-clear-field, body.vlt-form-elegant #vlt-order-form .vlt-clear-wrap:focus-within .vlt-clear-field { opacity: 1 !important; } } /* ------------------------------------------------------------------ * 4. Abschnitte: Kante statt Grossbuchstaben * * Grossbuchstaben mit Sperrung lesen sich langsamer und wirken laut. * Eine schmale farbige Kante gliedert genauso deutlich, ohne zu rufen. * Der Kasten wird von Rahmen auf ruhige Flaeche umgestellt. * ------------------------------------------------------------------ */ body.vlt-form-elegant #vlt-order-form .vlt-form-section { border: 1px solid #e8ece7; padding: 18px 18px 16px; } body.vlt-form-elegant #vlt-order-form .vlt-form-section__title { display: flex; align-items: center; gap: 9px; margin: 0 0 16px; font-size: 15px; font-weight: 600; letter-spacing: normal; text-transform: none; color: #23282b; } /* Die farbige Kante selbst wird in cockpit.php eingefaerbt. */ body.vlt-form-elegant #vlt-order-form .vlt-form-section__title::before { content: ""; flex: 0 0 auto; width: 3px; height: 15px; border-radius: 0; background: #009039; } /* ------------------------------------------------------------------ * 5. Auftragsbloecke: Kante statt Kasten * * Bei acht Auftraegen untereinander ist das der Unterschied zwischen * einer Formularseite und einem Stapel Umzugskartons. Rahmen * umschliessen und verengen, eine Kante gliedert nur. * ------------------------------------------------------------------ */ body.vlt-form-elegant #vlt-order-form .vlt-contract-row:not([hidden]) { border: 0; border-left: 3px solid #85b7eb; border-radius: 0; background: rgba(133, 183, 235, .06); padding: 12px 14px 12px 13px; } body.vlt-form-elegant #vlt-order-form .vlt-contract-row__title { font-size: 13px; font-weight: 600; letter-spacing: normal; text-transform: none; } /* ------------------------------------------------------------------ * 6. Zahlen in gleicher Ziffernbreite * * Untereinander stehende Betraege fluchten dann - der Unterschied * zwischen "Tabelle" und "Liste". Stueckzahl und Auftragswert stehen * zusaetzlich rechtsbuendig, so wie man Zahlen liest. * ------------------------------------------------------------------ */ body.vlt-form-elegant #vlt-order-form #vlt-postcode, body.vlt-form-elegant #vlt-order-form #vlt-date, body.vlt-form-elegant #vlt-order-form #vlt-birthdate, body.vlt-form-elegant #vlt-order-form #vlt-phone1, body.vlt-form-elegant #vlt-order-form #vlt-phone2, body.vlt-form-elegant #vlt-order-form .vlt-contract-row input[type="number"], body.vlt-form-elegant #vlt-order-form .vlt-quantity-input { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } body.vlt-form-elegant #vlt-order-form .vlt-contract-row input[type="number"], body.vlt-form-elegant #vlt-order-form .vlt-quantity-input { text-align: right; } /* ------------------------------------------------------------------ * 7. Beschriftungen etwas leiser * * Die Beschriftung sagt, was hineingehoert - der Inhalt ist die * Hauptsache. Heute sind beide gleich schwarz und gleich fett. * ------------------------------------------------------------------ */ body.vlt-form-elegant #vlt-order-form .vlt-field > label, body.vlt-form-elegant #vlt-order-form .vlt-aroundhome legend { font-size: 12.5px; font-weight: 500; color: #5c6360; } /* ------------------------------------------------------------------ * 8. Anzahl-Kaestchen im gleichen Ton * ------------------------------------------------------------------ */ body.vlt-form-elegant #vlt-order-form .vlt-count-box { border-radius: 7px; border-color: #d8dbd5; background: #ffffff; } /* ------------------------------------------------------------------ * 9. Auswahllisten (Fachberater, Produktgruppe, Strasse, Ort, E-Mail) * * Diese Listen haengen technisch am Seitenende, nicht im Formular - * deshalb ohne die #vlt-order-form-Umgebung angesprochen. * ------------------------------------------------------------------ */ body.vlt-form-elegant .vlt-combobox-list.vlt-combobox-portal, body.vlt-form-elegant .vlt-product-suggestion-portal, body.vlt-form-elegant .vlt-street-suggestion-portal, body.vlt-form-elegant .vlt-city-choice-portal, body.vlt-form-elegant #vlt-email-suggestions-portal { border-radius: 10px; border-color: #e0e3de; } body.vlt-form-elegant .vlt-list-search, body.vlt-form-elegant .vlt-product-search, body.vlt-form-elegant .vlt-email-domain-search { background: #ffffff !important; border-color: #d8dbd5 !important; border-radius: 7px !important; } /* ================================================================== * Orientierungshilfen (V2.9.410) * * Kundenzeile, laufende Summe, Fehlt-Anzeige, Abschnittsmarken. * Erzeugt werden sie in assets/js/order-form-extras.js. Alle * Bedienelemente tragen tabindex="-1" - sie sind keine Station in der * Tabulator-Kette. * ================================================================== */ /* --- Kundenzeile in der Kopfleiste --------------------------------- */ .vlt-kundenzeile { flex: 1 1 auto; min-width: 0; margin: 0 14px; padding: 4px 11px; border-radius: 999px; background: rgba(20, 60, 30, .05); color: #3c4a42; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Am Handy ist in der Kopfleiste kein Platz - dort steht die Zeile * unter dem Logo statt daneben. */ @media (max-width: 767px) { .vlt-kundenzeile { flex: 1 1 100%; order: 9; margin: 6px 0 0; text-align: center; } } /* --- Laufende Summe in der Abschnittsueberschrift ------------------ */ .vlt-laufende-summe { margin-left: auto; padding-left: 12px; color: #0f6e56; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* --- Fehlt-Anzeige neben dem Absenden-Knopf ------------------------ */ .vlt-restanzeige-wrap { position: relative; display: inline-block; margin-left: 10px; vertical-align: middle; } .vlt-restanzeige { padding: 6px 13px !important; border: 1px solid #f0c48a !important; border-radius: 999px !important; background: #fdf3e2 !important; color: #8a5200 !important; font-size: 12.5px !important; font-weight: 600 !important; line-height: 1.3 !important; cursor: pointer; box-shadow: none !important; } .vlt-restanzeige:hover { background: #fbe9cd !important; } .vlt-restliste { position: absolute; left: 0; bottom: calc(100% + 7px); z-index: 30; min-width: 230px; margin: 0; padding: 6px; list-style: none; border: 1px solid #e6e3da; border-radius: 10px; background: #ffffff; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); } .vlt-restliste li { margin: 0; } .vlt-restliste button { display: block !important; width: 100% !important; padding: 7px 10px !important; border: 0 !important; border-radius: 7px !important; background: transparent !important; color: #3c4a42 !important; font-size: 13px !important; font-weight: 400 !important; text-align: left !important; cursor: pointer; box-shadow: none !important; } .vlt-restliste button:hover { background: #f2f5f1 !important; } /* --- Abschnittsmarken ---------------------------------------------- */ .vlt-abschnittsmarken { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; } .vlt-abschnittsmarke { padding: 5px 12px !important; border: 1px solid #dcdfd8 !important; border-radius: 999px !important; background: #f7f8f6 !important; color: #5f6b64 !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; cursor: pointer; box-shadow: none !important; transition: background .12s ease, border-color .12s ease, color .12s ease; } .vlt-abschnittsmarke:hover { border-color: #b9c2bb !important; } /* Erledigt: alle Pflichtangaben des Abschnitts stehen. */ .vlt-abschnittsmarke.is-fertig { border-color: #9fe1cb !important; background: #e6f6ef !important; color: #0f6e56 !important; } .vlt-abschnittsmarke.is-fertig::after { content: " \2713"; } /* In Arbeit: hier steht gerade der Schreibfleck, es fehlt noch etwas. */ .vlt-abschnittsmarke.is-aktuell { border-color: #f0c48a !important; background: #fdf3e2 !important; color: #8a5200 !important; } /* ================================================================== * Abschnitt "Kunde & Adresse" - neue Anordnung (V2.9.412) * * Datum der VB | Geburtsdatum * Kundenname | Kundenvorname * PLZ | Ort * Strasse | Nr. * * Die beiden Datumsfelder geben das Mass vor. Kundenname, PLZ+Ort und * die Strasse enden alle exakt an der rechten Kante des Geburtsdatums; * Kundenvorname und Hausnummer sitzen in der zweiten Spalte. * * Gerechnet wird in ZEICHENBREITEN (ch), nicht in Pixeln: 1ch ist die * Breite der Ziffer Null in der eingestellten Schrift. Ein Datum hat * zehn Zeichen, eine PLZ fuenf, eine Hausnummer bis "1000a" ebenfalls * fuenf. So passt es auch dann noch, wenn im Design-Reiter eine andere * Schrift gewaehlt oder im Browser die Schriftgroesse veraendert wird. * * NUR am grossen Bildschirm. Am Handy bleibt jedes Feld auf voller * Breite untereinander - dort waere ein Zweispalter unlesbar. * ================================================================== */ @media (min-width: 768px) { body.vlt-form-elegant #vlt-order-form { /* * Zuschlag pro Feld: linker Innenabstand (12px), rechter * Innenabstand (40px - dort sitzt das Loeschkreuz) und der * Rahmen. Zusammen 55 Pixel. * * V2.9.415 - hier lag der Fehler aller bisherigen Anlaeufe: Ich * hatte mit 22 Pixeln gerechnet. Die 40 Pixel fuer das * Loeschkreuz hatte ich schlicht uebersehen, weshalb in jedem * kurzen Feld das letzte Zeichen abgeschnitten wurde. Gemessen * im laufenden Formular, nicht geschaetzt. */ --vlt-feldrand: 55px; /* * Taktgeber ist NICHT die Strasse, sondern der ORT. * * Der Ort teilt sich seine Zeile mit der PLZ. Was die PLZ * wegnimmt, fehlt ihm. "Limburg an der Lahn" braucht 16 Zeichen * - zusammen mit den fuenf Zeichen der PLZ und der Luecke ergibt * das die Spaltenbreite. Die Strasse steht allein in ihrer Zeile * und hat damit automatisch genug Platz; * "Kaiser-Friedrich-Promenade" passt mit Reserve. */ --vlt-luecke: 10px; /* Akzentkante + Innenabstand des Auftragskastens. */ --vlt-einzug: 17px; --vlt-kurz: calc(5ch + var(--vlt-feldrand)); --vlt-ort: calc(16ch + var(--vlt-feldrand)); --vlt-spalte: calc(var(--vlt-kurz) + var(--vlt-luecke) + var(--vlt-ort)); /* * Die beiden Datumsfelder teilen sich die Spalte zu gleichen * Teilen - dadurch endet das Geburtsdatum weiterhin exakt an * derselben Kante wie Kundenname, Ort und Strasse. */ --vlt-datum: calc((var(--vlt-spalte) - var(--vlt-luecke)) / 2); } /* * EIN Raster fuer das ganze Formular. * * Vorher hatte nur "Kunde & Adresse" die neuen Spalten - alle * anderen Abschnitte liefen weiter in ihren alten Rastern. Ergebnis: * Fachberater, Auftragspositionen und Montagetermin standen voellig * anders als die Adresse darueber. Jetzt gilt dasselbe Mass ueberall. */ body.vlt-form-elegant #vlt-order-form .vlt-order-grid { display: grid; grid-template-columns: var(--vlt-spalte) var(--vlt-spalte); gap: var(--vlt-luecke); } /* * Die Auftragsposition hat drei Felder. Stueckzahl und Produktgruppe * teilen sich die erste Spalte - genau wie PLZ und Ort weiter oben. * Der Auftragswert steht in der zweiten. Damit endet auch diese * Zeile an derselben Kante. */ /* * ":not([hidden])" ist hier lebenswichtig! * * V2.9.422 - Ohne diesen Zusatz stand hier "display: grid * !important" fuer ALLE Auftragszeilen. Damit wurde das Ausblenden * der nicht gewaehlten Zeilen ("display: none" bei [hidden]) * ueberstimmt: Es waren ploetzlich alle zwoelf Auftragsbloecke * sichtbar, obwohl nur einer gewaehlt war. Ein !important, das eine * Sichtbarkeitsregel aushebelt, ist kein Schoenheitsfehler - es * bricht die Bedienung. */ body.vlt-form-elegant #vlt-order-form .vlt-contract-row[hidden] { display: none !important; } body.vlt-form-elegant #vlt-order-form .vlt-contract-row:not([hidden]) { display: grid !important; /* * Das !important ist noetig: order-form.css setzt fuer diese * Zeile ausdruecklich drei gleich breite Spalten mit !important. */ /* * Der Auftragskasten ist eingerueckt (Akzentkante 3px + * Innenabstand 14px = 17px). Diese 17 Pixel muessen von der * letzten Spalte abgezogen werden, sonst endet der Auftragswert * genau um diesen Betrag weiter rechts als alle anderen Felder. */ /* * Der blaue Kasten umschliesst die Auftragsposition. Damit die * Felder darin trotzdem exakt auf den Spalten des uebrigen * Formulars sitzen, wird der Kasten per negativem Aussenabstand * um seinen eigenen Innenabstand nach links gezogen. Der Inhalt * beginnt dann auf derselben Linie wie Kundenname und Strasse, * der Rahmen liegt aussen herum. * * V2.9.421 - Vorher hatte ich stattdessen die Spalten * verschmaelert. Ergebnis: Der Kasten war 17 Pixel zu schmal, * und das Auftragswert-Feld ragte rechts heraus. */ --vlt-kastenrand: 15px; /* * V2.9.442: Stueckzahl schmal, die beiden rechten Felder GLEICH * breit. Vorher war die Produktgruppe schmal und der * Auftragswert doppelt so breit - das sah aus wie ein Versehen. * "1fr 1fr" teilt den Rest exakt in zwei Haelften. */ grid-template-columns: var(--vlt-kurz) minmax(0, 1fr) minmax(0, 1fr) !important; width: calc(2 * var(--vlt-spalte) + var(--vlt-luecke) + 2 * var(--vlt-kastenrand)) !important; max-width: none !important; margin-left: calc(-1 * var(--vlt-kastenrand)) !important; padding: 12px 14px !important; border: 1px solid #85b7eb !important; border-radius: 8px !important; background: rgba(133, 183, 235, .06) !important; box-shadow: none !important; gap: var(--vlt-luecke); align-items: start; } /* * Ja/Nein-Schalter: immer genau eine Spalte breit, beide Haelften * gleich. Gilt fuer beide Fragen - Lieferanschrift und Aroundhome. */ body.vlt-form-elegant #vlt-order-form .vlt-aroundhome-toggle { display: grid; grid-template-columns: 1fr 1fr; width: var(--vlt-spalte); max-width: 100%; } body.vlt-form-elegant #vlt-order-form .vlt-aroundhome-toggle label { justify-content: center; } /* Kommentarfeld ueber die volle Breite - Fliesstext braucht Platz. */ body.vlt-form-elegant #vlt-order-form textarea { width: calc(2 * var(--vlt-spalte) + var(--vlt-luecke)) !important; max-width: 100% !important; } /* Zwei Felder nebeneinander innerhalb einer Spalte. */ body.vlt-form-elegant #vlt-order-form .vlt-kunde-paar { display: flex; gap: var(--vlt-luecke); min-width: 0; } body.vlt-form-elegant #vlt-order-form .vlt-kunde-paar > .vlt-field { flex: 0 0 auto; } /* Der Ort nimmt, was von der Spalte uebrig bleibt. */ body.vlt-form-elegant #vlt-order-form .vlt-kunde-paar > .vlt-feld-ort { flex: 1 1 auto; min-width: 0; } /* * Die kurzen Felder auf ihr Inhaltsmass. * * WICHTIG: Begrenzt werden muss die HUELLE (.vlt-field), nicht nur * das Eingabefeld darin. Die Huelle traegt aus der Grundgestaltung * "width: 100%" - beim ersten Versuch war deshalb zwar das Feld * schmal, seine Huelle aber weiterhin spaltenbreit. Ergebnis: Die * beiden Datumsfelder standen viel zu weit auseinander und der Ort * wurde auf null Breite zusammengequetscht. */ body.vlt-form-elegant #vlt-order-form .vlt-kunde-paar > .vlt-field:has(#vlt-date), body.vlt-form-elegant #vlt-order-form .vlt-kunde-paar > .vlt-field:has(#vlt-birthdate) { flex: 0 0 var(--vlt-datum); width: var(--vlt-datum) !important; max-width: var(--vlt-datum) !important; } body.vlt-form-elegant #vlt-order-form .vlt-kunde-paar > .vlt-field:has(#vlt-postcode) { flex: 0 0 var(--vlt-kurz); width: var(--vlt-kurz) !important; max-width: var(--vlt-kurz) !important; } /* Der Ort nimmt, was uebrig bleibt - Huelle wie Feld. */ body.vlt-form-elegant #vlt-order-form .vlt-kunde-paar > .vlt-feld-ort { flex: 1 1 auto; width: auto !important; max-width: none !important; min-width: 0; } /* Die Eingabefelder fuellen ihre Huelle vollstaendig aus. */ body.vlt-form-elegant #vlt-order-form .vlt-kunde-paar .vlt-field input, body.vlt-form-elegant #vlt-order-form .vlt-kunde-paar .vlt-clear-wrap { width: 100% !important; max-width: 100% !important; } /* Strasse ueber beide Spalten: das Strassenfeld so breit wie der * Kundenname, die Hausnummer daneben in der zweiten Spalte. */ body.vlt-form-elegant #vlt-order-form .vlt-order-grid--kunde > .vlt-field:has(#vlt-street-name) { grid-column: 1 / span 2; } body.vlt-form-elegant #vlt-order-form .vlt-order-grid--kunde .vlt-street-split { gap: 14px; } body.vlt-form-elegant #vlt-order-form .vlt-order-grid--kunde .vlt-street-split > *:first-child { flex: 0 0 var(--vlt-spalte); max-width: var(--vlt-spalte); } body.vlt-form-elegant #vlt-order-form .vlt-order-grid--kunde .vlt-street-split > *:last-child { flex: 0 0 var(--vlt-kurz); max-width: var(--vlt-kurz); } /* Ziffern in gleicher Breite - sonst stimmt die Rechnung nicht. */ body.vlt-form-elegant #vlt-order-form .vlt-order-grid--kunde #vlt-date, body.vlt-form-elegant #vlt-order-form .vlt-order-grid--kunde #vlt-birthdate, body.vlt-form-elegant #vlt-order-form .vlt-order-grid--kunde #vlt-postcode, body.vlt-form-elegant #vlt-order-form .vlt-order-grid--kunde #vlt-street-number { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } } /* Am Handy: gar kein Raster, alles untereinander wie gewohnt. */ @media (max-width: 767px) { body.vlt-form-elegant #vlt-order-form .vlt-kunde-paar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } body.vlt-form-elegant #vlt-order-form .vlt-kunde-luecke { display: none; } } /* ------------------------------------------------------------------ * Strasse/Hausnummer ausserhalb des Kundenblocks (V2.9.418) * * Die abweichende Lieferanschrift hat ein zweites Strassenfeld. Dort * steht das Paar in EINER Rasterzelle - die Strasse nimmt also den * Rest, nachdem die Hausnummer ihr festes Mass genommen hat. Im * Kundenblock ist es umgekehrt: Dort spannt das Paar ueber zwei * Spalten, die Strasse bekommt genau eine. * ------------------------------------------------------------------ */ @media (min-width: 768px) { body.vlt-form-elegant #vlt-order-form .vlt-street-split > *:last-child { flex: 0 0 var(--vlt-kurz); max-width: var(--vlt-kurz); } body.vlt-form-elegant #vlt-order-form .vlt-street-split > *:first-child { flex: 1 1 auto; min-width: 0; } /* * Ueberall dort, wo das Paar ueber zwei Spalten geht - im * Kundenblock und bei der abweichenden Lieferanschrift - bekommt die * Strasse genau eine Spalte, die Hausnummer sitzt daneben. */ body.vlt-form-elegant #vlt-order-form .vlt-street-split:has(#vlt-street-name) > *:first-child, body.vlt-form-elegant #vlt-order-form .vlt-street-split:has(#vlt-delivery-street-name) > *:first-child { flex: 0 0 var(--vlt-spalte) !important; width: var(--vlt-spalte) !important; max-width: var(--vlt-spalte) !important; } } /* ------------------------------------------------------------------ * Freiwillige Felder: nur Rahmen, keine Fuellung (V2.9.421) * * Der gelbe Hintergrund stammt aus alter Zeit, als es noch keine * farbigen Konturen gab. Jetzt sagt der Rahmen bereits alles - die * Fuellung macht das Formular nur unruhig. Weisse Flaeche wie in allen * anderen Feldern, der Rahmen bleibt. * ------------------------------------------------------------------ */ body.vlt-form-elegant #vlt-order-form #vlt-fb2, body.vlt-form-elegant #vlt-order-form #vlt-phone2, body.vlt-form-elegant #vlt-order-form #vlt-email, body.vlt-form-elegant #vlt-order-form .vlt-field:not(.vlt-required) input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-elegant #vlt-order-form .vlt-field:not(.vlt-required) select, body.vlt-form-elegant #vlt-order-form .vlt-field:not(.vlt-required) textarea { background: #ffffff !important; } /* ------------------------------------------------------------------ * Kontrollzeile bei zu langen Eintraegen (V2.9.424) * * Erscheint nur, wenn der Inhalt nicht ins Feld passt - siehe * assets/js/order-form-extras.js. Bewusst klein und grau: Sie ist * eine Kontrolle, keine zweite Eingabe. * ------------------------------------------------------------------ */ .vlt-vollanzeige { margin: 4px 2px 0; font-size: 11.5px; line-height: 1.35; color: #6b7570; word-break: break-word; } .vlt-vollanzeige::before { content: "\2192\00a0"; color: #a8b0ab; } /* ================================================================== * Variante G "Klarschrift" (V2.9.430) * * Der HEIM-&-HAUS-Gedanke aus der Werksmaske: keine Kaesten, nur * feine Linien. Die Beschriftung steht klein und grau darueber, der * Wert gross darunter. Abschnitte sind eigene weisse Baender. * * WICHTIG - hier wird NICHTS am Kasten-Modell geaendert: * Innenabstaende und Rahmenstaerken bleiben exakt wie in den anderen * Spielarten, nur ihre FARBE wird durchsichtig gesetzt. Damit gilt * der Feldzuschlag von 55px unveraendert weiter und alle gemessenen * Spaltenkanten (782 / 1097) stimmen weiterhin. Wer hier an padding * oder border-width dreht, verschiebt das ganze Raster. * * Die Beschriftung wird um dieselben 12px eingerueckt wie der * Feldinhalt - sonst stuenden Etikett und Wert nicht untereinander. * ================================================================== */ /* Felder: durchsichtige Flaeche, nur eine Linie unten. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field select, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field textarea, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-required input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-required select, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-required textarea { background: transparent !important; border: 1px solid transparent !important; border-bottom-color: #b9c0bb !important; border-radius: 0 !important; box-shadow: none !important; } /* Freiwillige Felder: gestrichelte Linie statt durchgezogener. * Damit braucht es kein zweites Erkennungsmerkmal - das Sternchen * der Pflichtfelder bleibt trotzdem stehen. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field:not(.vlt-required) input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field:not(.vlt-required) select, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field:not(.vlt-required) textarea { background: transparent !important; border-bottom-style: dashed !important; border-bottom-color: #cdd3ce !important; } /* Beschriftung: klein, grau, buendig ueber dem Wert. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field > label, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-aroundhome legend, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-delivery-toggle legend { font-size: 11.5px; font-weight: 400; letter-spacing: .01em; color: #7c847f; padding-left: 12px; margin-bottom: 2px; } /* Die Kontrollzeile zieht mit. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-vollanzeige { margin-left: 12px; } /* Abschnitte als eigene weisse Baender ohne Rahmen. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-form-section { background: #ffffff; border: 0; border-radius: 10px; box-shadow: none; } /* Abschnittstitel klein und ruhig - die farbige Kante bleibt. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-form-section__title { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #7c847f; } /* * Auftragsbloecke als weisse Karte mit farbiger Kante links. * * ACHTUNG: ':not([hidden])' ist Pflicht. Ohne diese Einschraenkung * ueberstimmt eine Anzeigeregel das 'hidden' der nicht gewaehlten * Auftraege - dann stehen ALLE Bloecke offen. Genau das ist in * V2.9.417 passiert. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row:not([hidden]) { background: #ffffff; border: 0; border-left: 3px solid #d7dcd8; border-radius: 0 10px 10px 0; box-shadow: none; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row[hidden] { display: none !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row__title { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #7c847f; } /* Ja/Nein-Schalter und Anzahl-Kaestchen bleiben als Flaeche * erkennbar - sie sind Knoepfe, keine Schreibfelder. Nur ihre * Kontur wird leiser. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-aroundhome-toggle, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-count-box { border-color: #d7dcd8 !important; } /* Platzhalter zurueckhaltend. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field input::placeholder, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field textarea::placeholder { color: #aab1ac; } /* * Drei Felder werden an anderer Stelle ueber ihre Kennung eingefaerbt * (Fachberater 2, Telefon 2, E-Mail tragen den gelben Hinweiston aus * den Branding-Einstellungen). Eine Kennung wiegt schwerer als eine * Klasse - deshalb muessen sie hier eigens genannt werden, sonst * bleiben sie als einzige Kaesten stehen. */ body.vlt-form-klarschrift #vlt-order-form #vlt-fb2, body.vlt-form-klarschrift #vlt-order-form #vlt-phone2 { background: transparent !important; border-color: transparent !important; border-bottom-color: #cdd3ce !important; border-bottom-style: dashed !important; } body.vlt-form-klarschrift #vlt-order-form #vlt-email { background: transparent !important; border-color: transparent !important; border-bottom-color: #b9c0bb !important; border-bottom-style: solid !important; } /* ------------------------------------------------------------------ * Abschnitt "Auftraege": gleiche Kanten wie der Rest (V2.9.432) * * Der Knopf "+ Mehr Auftraege" lief ueber die volle Breite des * Abschnitts und endete damit weiter rechts als jedes Feld und als der * Auftragskasten - drei verschiedene rechte Kanten uebereinander. Jetzt * endet er auf derselben Linie wie die zweite Spalte. * ------------------------------------------------------------------ */ @media (min-width: 768px) { body.vlt-form-elegant #vlt-order-form .vlt-order-count-boxes-wrap { width: calc(2 * var(--vlt-spalte) + var(--vlt-luecke)) !important; max-width: calc(2 * var(--vlt-spalte) + var(--vlt-luecke)) !important; } /* * Der Knopf bekommt seine Breite von der Huelle, nicht aus einer * eigenen Rechnung. Beim ersten Versuch stand hier dieselbe Formel * wie oben - der Knopf war trotzdem vier Pixel zu breit. Ueber * "100 % der Huelle" kann das nicht mehr passieren. */ body.vlt-form-elegant #vlt-order-form .vlt-count-more { display: flex !important; justify-content: center; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Das VB-Datum der Werksmaske so breit wie das Geburtsdatum. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werks-datum > .vlt-field, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-order-grid--kunde > .vlt-field:has(#vlt-birthdate) { width: var(--vlt-datum) !important; max-width: var(--vlt-datum) !important; } } /* ================================================================== * Variante G - Ruhiges Zeilenmass (V2.9.434) * * Ohne Kasten stand die Schrift oben im 40 Pixel hohen Feld und die * Linie ganz unten. Zwischen Beschriftung und Linie klaffte dadurch * eine Luecke, die groesser war als der Zeilenabstand selbst - die * Maske sah zerrissen aus. Hier wird nur die HOEHE geaendert, nie die * seitlichen Innenabstaende: Die Feldbreiten (Zuschlag 55px) und alle * Spaltenkanten bleiben dadurch unangetastet. * ================================================================== */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field select { height: 30px !important; min-height: 30px !important; padding-top: 2px !important; padding-bottom: 2px !important; font-size: 15px !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field textarea { min-height: 84px !important; padding-top: 4px !important; padding-bottom: 4px !important; font-size: 15px !important; } /* Beschriftung sitzt direkt ueber dem Wert. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field > label, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-aroundhome legend { margin-bottom: 0 !important; line-height: 1.25; } /* Die E-Mail-Beschriftung war als einzige fett und schwarz. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-email-field .vlt-label-row { align-items: baseline; gap: 12px; margin-bottom: 0; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-email-field .vlt-label-row > label[for="vlt-email"] { font-size: 11.5px !important; font-weight: 400 !important; color: #7c847f !important; padding-left: 12px; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-email-field .vlt-inline-toggle, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-format-toggle { font-size: 11.5px !important; font-weight: 400 !important; color: #8b918d !important; margin-top: 3px !important; } /* Zeilenabstand im Raster: gleichmaessig und ruhig. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-order-grid { row-gap: 14px !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-form-section { padding: 14px 16px 16px !important; } /* * Der Auftragskasten trug weiterhin den blauen Rahmen der anderen * Spielarten - die allgemeine Regel steht mit "!important" da. In * Klarschrift ist er eine weisse Karte mit farbiger Kante links. * ":not([hidden])" bleibt Pflicht, sonst stehen wieder alle Bloecke * offen. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row:not([hidden]) { border: 0 !important; border-left: 3px solid #d7dcd8 !important; border-radius: 0 10px 10px 0 !important; background: #ffffff !important; box-shadow: none !important; } /* Etwas Luft zwischen VB-Datum und der Anzahl der Auftraege. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werks-datum { margin-bottom: 18px; } /* Anzahl-Kaestchen und "Mehr"-Knopf leiser. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-count-more { border-style: solid !important; border-color: #d7dcd8 !important; font-weight: 400 !important; } /* ================================================================== * Variante G - das Raster der Werksmaske (V2.9.435) * * Zwei gleich breite Spalten, sonst nichts. Jedes Feld ist eine eigene * Zelle und fuellt sie ganz aus. Felder, die im Werk ueber die ganze * Zeile laufen (Strasse, Geburtsdatum, E-Mail, VB-Datum), spannen beide * Spalten. * * Damit steht untereinander: * Spalte 1 Kundenname - PLZ - Telefon * Spalte 2 Kundenvorname - Ort - Mobil * * Die Sonderbreiten der anderen Spielarten (schmale PLZ, schmales * Datum) werden hier ausdruecklich zurueckgenommen - sie waren der * Grund fuer die schiefen Verhaeltnisse. * ================================================================== */ @media (min-width: 768px) { body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid { display: grid !important; grid-template-columns: var(--vlt-spalte) var(--vlt-spalte) !important; column-gap: var(--vlt-luecke) !important; row-gap: 14px !important; align-items: start; } /* Jede Huelle und jedes Feld fuellt seine Zelle vollstaendig. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field > input, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field > select, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field .vlt-clear-wrap, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field .vlt-clear-wrap > input { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 1 1 auto !important; } /* Ueber beide Spalten - genau die Zeilen, die im Werk durchlaufen. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field:has(#vlt-street-name), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field:has(#vlt-birthdate), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field:has(#vlt-date), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-email-field { grid-column: 1 / span 2 !important; } /* Strasse und Hausnummer bleiben eine Zeile: die Nummer haengt * rechts an, beide zusammen enden an der rechten Kante. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-street-split { display: flex !important; gap: var(--vlt-luecke) !important; width: 100% !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-street-split > *:first-child { flex: 1 1 auto !important; max-width: none !important; width: auto !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-street-split > *:last-child { flex: 0 0 var(--vlt-kurz) !important; max-width: var(--vlt-kurz) !important; width: var(--vlt-kurz) !important; } /* * Auftragsposition im selben Raster: Stueckzahl schmal, Produkt- * gruppe bis zur rechten Kante, Auftragswert darunter ueber beide * Spalten. ":not([hidden])" bleibt Pflicht - sonst stehen alle * Bloecke offen. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row:not([hidden]) { grid-template-columns: var(--vlt-kurz) minmax(0, 1fr) !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row__title, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row > .vlt-field:last-of-type { grid-column: 1 / span 2 !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row .vlt-field, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row input, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row select { width: 100% !important; max-width: none !important; } } /* ------------------------------------------------------------------ * Werksmaske - Breiten endgueltig festnageln (V2.9.437) * * Die Regeln oben griffen nicht ueberall: Die Eingabefelder stecken * teilweise in einer Huelle (.vlt-clear-wrap fuer das Loeschkreuz), * deshalb hat "> .vlt-field > input" sie nicht erwischt. Und die * Sonderbreiten der anderen Spielarten (schmale PLZ, schmales Datum) * sind ueber Kennungen gesetzt und wiegen schwerer als Klassen. * Darum hier ebenfalls ueber die Kennungen. * ------------------------------------------------------------------ */ @media (min-width: 768px) { body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-clear-wrap { width: 100% !important; max-width: none !important; min-width: 0 !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-lastname, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-firstname, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-postcode, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-city, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-birthdate, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-date, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-email, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-phone1, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-phone2 { width: 100% !important; max-width: none !important; min-width: 0 !important; } /* Auch die Huellen der kurzen Felder fuellen ihre Zelle. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field:has(#vlt-postcode), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field:has(#vlt-birthdate), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field:has(#vlt-date) { width: 100% !important; max-width: none !important; flex: none !important; } /* Strasse nimmt den Rest der Zeile, die Hausnummer haengt rechts an. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-street-split > *:first-child, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-street-name { flex: 1 1 auto !important; width: 100% !important; max-width: none !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-street-split > *:last-child, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-street-number { flex: 0 0 var(--vlt-kurz) !important; width: var(--vlt-kurz) !important; max-width: var(--vlt-kurz) !important; } } /* * Die Huelle des Loeschkreuzes ist ein - ohne "display:block" * verpufft eine Breitenangabe darauf. */ @media (min-width: 768px) { body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-clear-wrap { display: block !important; width: 100% !important; max-width: none !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-street-split > .vlt-clear-wrap:has(#vlt-street-number) { flex: 0 0 var(--vlt-kurz) !important; width: var(--vlt-kurz) !important; max-width: var(--vlt-kurz) !important; } } /* * Letzter Halt: Die Huellen der kurzen Felder werden anderswo ueber * ":has(#kennung)" begrenzt - das zaehlt als Kennung und wiegt schwerer * als eine Klasse. Deshalb hier mit derselben Muenze bezahlt. */ @media (min-width: 768px) { body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-clear-wrap:has(#vlt-lastname), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-clear-wrap:has(#vlt-firstname), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-clear-wrap:has(#vlt-postcode), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-clear-wrap:has(#vlt-city), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-clear-wrap:has(#vlt-birthdate), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-clear-wrap:has(#vlt-date), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-clear-wrap:has(#vlt-email), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-clear-wrap:has(#vlt-phone1), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-clear-wrap:has(#vlt-phone2), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-clear-wrap:has(#vlt-street-name), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field:has(#vlt-postcode), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field:has(#vlt-birthdate), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid > .vlt-field:has(#vlt-date) { display: block !important; width: 100% !important; max-width: none !important; flex: 1 1 auto !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-postcode, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-birthdate, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-date, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-street-name { width: 100% !important; max-width: none !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-clear-wrap:has(#vlt-street-number) { display: block !important; flex: 0 0 var(--vlt-kurz) !important; width: var(--vlt-kurz) !important; max-width: var(--vlt-kurz) !important; } } /* Die Strasse darf nicht ueber die Zeile hinauswachsen - ohne * "min-width:0" rechnet ein Flex-Element mit seiner Wunschbreite und * schiebt die Hausnummer vier Pixel ueber die rechte Kante. */ @media (min-width: 768px) { body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-street-split { width: 100% !important; box-sizing: border-box !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-street-split > *:first-child { min-width: 0 !important; } } /* Strasse/Hausnummer als Raster statt als Flex-Zeile: Nur so endet die * Hausnummer garantiert auf der rechten Kante. Mit Flex blieben je nach * Schriftbreite ein paar Pixel Ueberhang. */ @media (min-width: 768px) { body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-street-split { display: grid !important; grid-template-columns: minmax(0, 1fr) var(--vlt-kurz) !important; gap: var(--vlt-luecke) !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-street-split > * { width: 100% !important; max-width: none !important; min-width: 0 !important; } } /* ------------------------------------------------------------------ * Auftragsposition: eine Zeile, drei Felder auf gleicher Hoehe * (V2.9.442) * * Das Stueckzahl-Feld war hoeher als seine beiden Nachbarn und sass * dadurch versetzt. Grund: Es kommt aus einem anderen Feldtyp * (Zahlenfeld) und hatte eine eigene Hoehe. Hier bekommen alle drei * dieselbe Hoehe und stehen mit der Unterkante auf einer Linie. * Die Breite der Stueckzahl bleibt, wie sie ist. * ------------------------------------------------------------------ */ @media (min-width: 768px) { body.vlt-form-elegant #vlt-order-form .vlt-contract-row > .vlt-field { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-self: end !important; min-width: 0 !important; } body.vlt-form-elegant #vlt-order-form .vlt-contract-row input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-elegant #vlt-order-form .vlt-contract-row select, body.vlt-form-elegant #vlt-order-form .vlt-contract-row .vlt-clear-wrap { height: 40px !important; min-height: 40px !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; } body.vlt-form-elegant #vlt-order-form .vlt-contract-row .vlt-clear-wrap { display: block !important; } /* In Klarschrift gilt dieselbe Aufteilung - dort sind die Felder * nur flacher, weil sie keine Kaesten haben. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row:not([hidden]) { grid-template-columns: var(--vlt-kurz) minmax(0, 1fr) minmax(0, 1fr) !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row > .vlt-field:last-of-type { grid-column: auto !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row input:not([type="radio"]):not([type="checkbox"]), body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row select, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row .vlt-clear-wrap { height: 30px !important; min-height: 30px !important; } /* Und die Hausnummer endet endgueltig auf der rechten Kante. */ body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid .vlt-street-split > *, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-werk-grid #vlt-street-number { box-sizing: border-box !important; } } /* Die Ueberschrift "Auftrag N" muss ueber ALLE Spalten laufen. Stand * sie nur ueber zwei, rutschte die Stueckzahl in die dritte Spalte der * ersten Zeile - die Zeile brach auseinander. */ @media (min-width: 768px) { body.vlt-form-elegant #vlt-order-form .vlt-contract-row__title, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-contract-row__title { grid-column: 1 / -1 !important; } } /* ------------------------------------------------------------------ * Kommentarfeld und Fehlt-Anzeige (V2.9.444) * * 1. Das Kommentarfeld trug als einziges einen gelb-orangen Rahmen * (es ist freiwillig). Jetzt schlicht dunkelgrau wie normale * Schrift - es ist ein Schreibfeld, kein Warnhinweis. * * 2. Die Anzeige "X Felder fehlen" stand zwischen "Absenden" und * "Abbrechen" und trennte die beiden Knoepfe. Sie bekommt eine * eigene Zeile UEBER den Knoepfen, links buendig - sichtbar, aber * nicht im Weg. Anklickbar bleibt sie. * ------------------------------------------------------------------ */ body.vlt-form-elegant #vlt-order-form textarea, body.vlt-form-elegant #vlt-order-form .vlt-field:not(.vlt-required) textarea { border-color: #4a4f4c !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form textarea, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field:not(.vlt-required) textarea { border-color: transparent !important; border-bottom-color: #4a4f4c !important; border-bottom-style: solid !important; } body.vlt-form-elegant .vlt-restanzeige-wrap { display: block !important; order: -1; flex-basis: 100%; width: 100%; margin: 0 0 12px !important; } body.vlt-form-elegant .vlt-restanzeige { display: inline-block; border-color: #d7dcd8 !important; background: transparent !important; color: #6b7570 !important; font-weight: 400 !important; padding: 4px 0 !important; border: 0 !important; border-radius: 0 !important; text-decoration: underline dotted; text-underline-offset: 4px; } body.vlt-form-elegant .vlt-restanzeige:hover { background: transparent !important; color: #2f3532 !important; } /* ------------------------------------------------------------------ * Aufraeumen nach Wunsch (V2.9.445) * * 1. Die Reihe der Abschnittsmarken oben entfaellt. * 2. Der Auftragskasten ist genau so breit wie das Kommentarfeld und * steht auf derselben linken Kante - er ragte vorher 15 Pixel nach * beiden Seiten heraus. * 3. Der Rahmen des Kommentarfeldes ist eine feine Linie, kein Balken. * ------------------------------------------------------------------ */ body.vlt-form-elegant #vlt-order-form .vlt-abschnittsmarken { display: none !important; } @media (min-width: 768px) { body.vlt-form-elegant #vlt-order-form .vlt-contract-row:not([hidden]) { width: calc(2 * var(--vlt-spalte) + var(--vlt-luecke)) !important; margin-left: 0 !important; box-sizing: border-box !important; } } body.vlt-form-elegant #vlt-order-form textarea, body.vlt-form-elegant #vlt-order-form .vlt-field:not(.vlt-required) textarea { border-width: 1px !important; border-color: #6b7570 !important; } body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form textarea, body.vlt-form-elegant.vlt-form-klarschrift #vlt-order-form .vlt-field:not(.vlt-required) textarea { border-width: 1px !important; border-color: transparent !important; border-bottom-color: #6b7570 !important; } /* Das Kommentarfeld rechnete seine Breite ohne Innenabstand und war * dadurch breiter als der Auftragskasten. */ @media (min-width: 768px) { body.vlt-form-elegant #vlt-order-form textarea { box-sizing: border-box !important; } } /* ------------------------------------------------------------------ * Handy: Zahlen linksbuendig (V2.9.447) * * Am Schreibtisch stehen Stueckzahl und Auftragswert rechtsbuendig - * dort stehen sie untereinander und fluchten dadurch. Am Handy steht * jedes Feld allein und ueber die volle Breite; rechtsbuendig sieht * die Eingabe dann verloren aus. Deshalb dort linksbuendig. * ------------------------------------------------------------------ */ @media (max-width: 767px) { body.vlt-form-elegant #vlt-order-form .vlt-contract-row input[type="number"], body.vlt-form-elegant #vlt-order-form .vlt-contract-row input[inputmode="decimal"], body.vlt-form-elegant #vlt-order-form .vlt-quantity-input { text-align: left !important; } } /* ------------------------------------------------------------------ * Kommentarfeld auf Rasterbreite (V2.9.462) * * Das Feld war 27 Pixel breiter als die beiden Spalten darueber. * Grund: die Spaltenbreite wird in "ch" gerechnet - der Breite einer * Ziffer. Die haengt an der Schriftgroesse. Das Kommentarfeld hat in * Variante G 15 Pixel Schrift, das Raster nur 14 - dieselbe Formel * ergab dort also ein groesseres Ergebnis. * * Loesung: die Rechnung wandert eine Ebene hoeher, in die Huelle des * Feldes (14 Pixel Schrift, wie das Raster). Das Textfeld selbst holt * sich nur noch 100 Prozent davon und kann gar nicht mehr abweichen. * ------------------------------------------------------------------ */ @media (min-width: 768px) { body.vlt-form-elegant #vlt-order-form .vlt-field:has(> textarea), body.vlt-form-elegant #vlt-order-form .vlt-field:has(> .vlt-clear-wrap > textarea) { width: calc(2 * var(--vlt-spalte) + var(--vlt-luecke)) !important; max-width: calc(2 * var(--vlt-spalte) + var(--vlt-luecke)) !important; box-sizing: border-box !important; } body.vlt-form-elegant #vlt-order-form .vlt-field > .vlt-clear-wrap { display: block !important; width: 100% !important; } body.vlt-form-elegant #vlt-order-form textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } }