/* Tradefactory · Dubai Setup – HubSpot Formular-Styling
   Einbinden auf der Seite, auf der das Formular per Embed-Code liegt (oder als Custom CSS im HubSpot Theme).
   Google Fonts: Montserrat 300/500, Source Serif 4 400/600 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500&family=Source+Serif+4:wght@400;600&display=swap');

.tf-form{--tf-blue:#0b1f3a;--tf-gold:#c9a44a;--tf-paper:#f3f2f2;--tf-grey:#5b6577;--tf-line:#c9c5bd;--tf-bg:#ffffff;--tf-text:#0b1f3a;--tf-muted:#3a4657;
  max-width:560px;background:var(--tf-bg);color:var(--tf-text);padding:48px 52px 44px;box-sizing:border-box;
  font-family:'Source Serif 4',Georgia,serif;font-size:15px;line-height:1.55}
.tf-form.tf-dark{--tf-bg:#0b1f3a;--tf-text:#f3f2f2;--tf-muted:#c9d2df;--tf-grey:#c9a44a;--tf-line:#3d4f6b}
@media (max-width:600px){.tf-form{padding:32px 24px}}

/* Kopf (außerhalb des HubSpot-Formulars, im Embed-Container) */
.tf-form .tf-kicker{font-family:Montserrat,sans-serif;font-weight:300;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--tf-gold);margin:0 0 12px}
.tf-form .tf-title{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:30px;line-height:1.15;margin:0 0 12px;text-wrap:balance}
.tf-form .tf-intro{color:var(--tf-muted);max-width:44ch;margin:0 0 28px}

/* HubSpot-Struktur */
.tf-form .hs-form fieldset{max-width:none;border:0;padding:0;margin:0 0 22px;min-width:0;display:flex;gap:22px}
.tf-form .hs-form fieldset .hs-form-field{float:none;flex:1 1 0;min-width:0;width:auto!important;margin:0}
.tf-form .hs-form .input{margin-right:0}
@media (max-width:480px){.tf-form .hs-form fieldset{flex-direction:column}}

.tf-form .hs-form-field>label{display:block;font-family:Montserrat,sans-serif;font-weight:400;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--tf-grey);margin:0 0 6px}
.tf-form .hs-form-required{color:var(--tf-gold);margin-left:2px}

.tf-form .hs-input:not([type=checkbox]):not([type=radio]){width:100%!important;border:0;border-bottom:1px solid var(--tf-line);border-radius:0;background:transparent;padding:8px 0;font:inherit;font-size:15px;color:var(--tf-text);box-shadow:none;-webkit-appearance:none}
.tf-form .hs-input::placeholder{color:#8a93a3}
.tf-form .hs-input:focus{outline:none;border-bottom-color:var(--tf-gold)}
.tf-form textarea.hs-input{min-height:88px;line-height:1.5;resize:vertical}
.tf-form select.hs-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23c9a44a' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0 center;padding-right:20px}

/* Mehrfachauswahl (Checkbox-Liste) als Chips */
.tf-form .inputs-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tf-form .inputs-list.multi-container>li,.tf-form .inputs-list>li.hs-form-checkbox{margin:0}
.tf-form .hs-form-checkbox-display{display:flex;align-items:center;gap:8px;padding:8px 14px;min-height:44px;border:1px solid var(--tf-line);font-size:13.5px;cursor:pointer;white-space:nowrap;box-sizing:border-box;margin:0}
.tf-form .hs-form-checkbox-display:hover{border-color:var(--tf-gold)}
.tf-form .hs-form-checkbox-display:has(input:checked){border-color:var(--tf-gold);background:rgba(201,164,74,.10)}
.tf-form input[type=checkbox],.tf-form input[type=radio]{accent-color:var(--tf-blue);width:14px;height:14px;margin:0}
.tf-form.tf-dark input[type=checkbox],.tf-form.tf-dark input[type=radio]{accent-color:var(--tf-gold)}

/* Datenschutz / Einwilligung */
.tf-form .legal-consent-container,.tf-form .hs-richtext{font-size:12.5px;line-height:1.55;color:var(--tf-muted)}
.tf-form .legal-consent-container .hs-form-booleancheckbox-display{display:grid;grid-template-columns:16px 1fr;gap:12px;align-items:start;padding:0;border:0;min-height:0;white-space:normal}
.tf-form .legal-consent-container .hs-form-booleancheckbox-display>input{margin-top:3px}
.tf-form .legal-consent-container p{margin:0}
.tf-form a{color:var(--tf-text);text-decoration:none;border-bottom:1px solid var(--tf-gold)}
.tf-form a:hover{color:var(--tf-gold)}

/* Button */
.tf-form .hs-submit{margin-top:6px}
.tf-form .hs-button{font-family:Montserrat,sans-serif;font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tf-paper);background:var(--tf-blue);border:0;border-radius:0;padding:0 28px;height:48px;line-height:48px;cursor:pointer;white-space:nowrap;text-shadow:none;box-shadow:none}
.tf-form .hs-button:hover{background:#16305a}
.tf-form .hs-button:active{background:#071429}
.tf-form.tf-dark .hs-button{color:var(--tf-blue);background:var(--tf-gold)}
.tf-form.tf-dark .hs-button:hover{background:#d9b85f}
.tf-form.tf-dark .hs-button:active{background:#b8933d}
.tf-form .hs-button:focus-visible,.tf-form .hs-input:focus-visible{outline:2px solid var(--tf-gold);outline-offset:2px}

/* Fehler & Erfolg */
.tf-form .hs-error-msgs{list-style:none;margin:6px 0 0;padding:0}
.tf-form .hs-error-msg,.tf-form .hs-error-msgs label{font-family:Montserrat,sans-serif;font-size:10px;letter-spacing:.06em;text-transform:none;color:#a33a2a}
.tf-form .hs-input.invalid.error{border-bottom-color:#a33a2a}
.tf-form .submitted-message{font-size:17px;color:var(--tf-text)}
.tf-form .tf-alt{margin-top:16px;font-size:12.5px;color:var(--tf-muted)}