/* ============================================================ Gewährleistungsformular – 2-Spalten-Grid Layout DOM-Reihenfolge: 0 343 = Anrede (Select) → volle Breite Zeile 1 1 344 = Vorname → Spalte 1 Zeile 2 2 345 = Nachname → Spalte 2 Zeile 2 3 346 = Firma → volle Breite Zeile 3 4 347 = Strasse → volle Breite Zeile 4 5 348 = PLZ → Spalte 1 Zeile 5 6 349 = Ort → Spalte 2 Zeile 5 7 350 = Telefon (DOM vor Land) → Spalte 2 Zeile 6 8 351 = Land (Select) → Spalte 1 Zeile 6 9 352 = E-Mail → volle Breite Zeile 7 10 353 = Kundennummer → Spalte 1 Zeile 8 11 354 = Bestellnummer → Spalte 2 Zeile 8 12 355 = Lieferdatum → Spalte 1 Zeile 9 13 356 = Seriennummer Garage → Spalte 2 Zeile 9 14 357 = Datei anhängen (file) → volle Breite Zeile 10 15 358 = Ihre Anfrage (textarea) → volle Breite Zeile 11 ============================================================ */ .service-request-form .ccm-dashboard-express-form fieldset { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2rem; } /* ---- Eingabefeld-Styling ---- */ .service-request-form .ccm-dashboard-express-form fieldset input, .service-request-form .ccm-dashboard-express-form fieldset select, .service-request-form .ccm-dashboard-express-form fieldset textarea { border: 1px solid rgba(40, 48, 63, 0.1); background-color: #F5F5F5; border-radius: 0; outline: none; box-shadow: none; } .service-request-form .ccm-dashboard-express-form fieldset input::placeholder, .service-request-form .ccm-dashboard-express-form fieldset select::placeholder, .service-request-form .ccm-dashboard-express-form fieldset textarea::placeholder { font-style: normal; } /* ---- Felder volle Breite ---- */ .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[343\]\[atSelectOptionValue\]), .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[346\]\[value\]), .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[347\]\[value\]), .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[352\]\[value\]), .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID-357-value), .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[358\]\[value\]), .service-request-form .ccm-dashboard-express-form fieldset > div:not(:has(input, select, textarea)) { grid-column: 1 / -1; } /* ---- Zeile 2: Vorname | Nachname ---- */ .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[344\]\[value\]) { grid-column: 1; } .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[345\]\[value\]) { grid-column: 2; } /* ---- Zeile 5: PLZ | Ort ---- */ .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[348\]\[value\]) { grid-column: 1; } .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[349\]\[value\]) { grid-column: 2; } /* ---- Zeile 6: Land | Telefon (DOM-Reihenfolge: Telefon vor Land → grid-row fix) ---- */ .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[350\]\[value\]) { grid-column: 2; grid-row: 6; } .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[351\]\[atSelectOptionValue\]) { grid-column: 1; grid-row: 6; } /* ---- Zeile 8: Kundennummer | Bestellnummer ---- */ .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[353\]\[value\]) { grid-column: 1; } .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[354\]\[value\]) { grid-column: 2; } /* ---- Zeile 9: Lieferdatum | Seriennummer ---- */ .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[355\]\[value\]) { grid-column: 1; } .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[355\]\[value\]) div.text-muted { display:none; } .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID\[356\]\[value\]) { grid-column: 2; } /* ============================================================ File-Upload Feld – Button-Style wie Kontaktformular - Input verstecken - Label als klickbarer Button mit Paperclip-Icon ============================================================ */ /* Input unsichtbar machen aber im DOM behalten (für Submit) */ .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID-357-value) input[type="file"] { opacity: 0; position: absolute; left: -9999px; } /* Label als Button stylen */ .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID-357-value) label { background-color: #F5F5F5; color: black; padding: 5px 10px; border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; transition: background-color 0.3s ease; border: 1px solid rgba(40, 48, 63, 0.1); margin-bottom: 0; } .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID-357-value) label:hover { background-color: #e8e8e8; } /* Paperclip-Icon als ::before mit inline-SVG */ .service-request-form .ccm-dashboard-express-form fieldset > div:has(#akID-357-value) label::before { content: ""; display: block; width: 20px; height: 20px; margin-right: 10px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } /* ---- Fehler-Label (statisch) ---- */ .service-request-form .ccm-dashboard-express-form label.error { font-size: 12px; font-weight: 600; color: #910000; } /* ============================================================ Serviceanfrage: Felder 353–356 ausblenden. Die Klasse "hide-order-fields" wird per inline JS anhand der URL gesetzt (siehe