/* ==========================================================================
   sevenpress Konfigurator – Fluent Forms im Claude-Design
   Karten, Chips, Checkboxen nutzen die Export-Klassen (per konfigurator.js).
   Hier nur: Fluent-Forms-Standardstile neutralisieren + Formular-Layout.
   ========================================================================== */
:is(.section-konfigurator-formular, .section-kontakt) .fluentform { width: 100%; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform * { box-sizing: border-box; }
:is(.section-konfigurator-formular, .section-kontakt) .frm-fluent-form { color: var(--color-white); }

/* Schritt-Layout: 6er-Raster für halbe/drittel Felder */
:is(.section-konfigurator-formular, .section-kontakt) .fluentform-step { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-12); row-gap: var(--space-28); }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform-step:not(.active) { display: none; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform-step > * { grid-column: 1 / -1; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform-step > .sp-half { grid-column: span 3; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform-step > .sp-third { grid-column: span 2; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform-step > .sp-twothird { grid-column: span 4; }
@media (max-width: 640px) {
  :is(.section-konfigurator-formular, .section-kontakt) .fluentform-step > .sp-half,
  :is(.section-konfigurator-formular, .section-kontakt) .fluentform-step > .sp-third,
  :is(.section-konfigurator-formular, .section-kontakt) .fluentform-step > .sp-twothird { grid-column: 1 / -1; }
}
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-el-group { margin: 0; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-el-group.ff_excluded,
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .has-conditions.ff_excluded { display: none; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-head { margin-bottom: var(--space-4); }
:is(.section-konfigurator-formular, .section-kontakt) .sp-subhead { margin-top: var(--space-12); padding-top: var(--space-20); border-top: 1px solid var(--color-line-2); }

/* Labels wie im Design (Mono, klein); Fragen (Q.0x) größer */
:is(.section-konfigurator-formular, .section-kontakt) .ff-el-input--label { margin-bottom: var(--space-8); }
:is(.section-konfigurator-formular, .section-kontakt) .ff-el-input--label label { font-family: var(--font-mono); font-size: var(--fs-11); font-weight: 400; color: var(--color-gray-500); margin: 0; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-q .ff-el-input--label label { font-family: var(--font-sans); font-size: var(--fs-14); font-weight: 500; color: var(--color-white); }
:is(.section-konfigurator-formular, .section-kontakt) .ff-el-input--label.ff-el-is-required label::after,
:is(.section-konfigurator-formular, .section-kontakt) .ff-el-input--label.ff-el-is-required label::before { display: none !important; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-opt { color: var(--color-gray-500); font-weight: 400; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-pkg .ff-el-input--label,
:is(.section-konfigurator-formular, .section-kontakt) .sp-style .ff-el-input--label,
:is(.section-konfigurator-formular, .section-kontakt) .sp-nolabel .ff-el-input--label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Textfelder = .field--2 / .field--3 aus dem Export */
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-el-form-control { width: 100%; height: auto; background: var(--color-surface-1); border: 0; border-radius: var(--radius-10); box-shadow: var(--shadow-5); padding: var(--space-13) var(--space-14); color: var(--color-white); font: inherit; font-size: var(--fs-14); line-height: 1.4; transition: box-shadow .15s; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform select.ff-el-form-control { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-gray-400) 50%), linear-gradient(135deg, var(--color-gray-400) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: var(--space-40); }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-el-form-control::placeholder { color: var(--color-gray-500); opacity: 1; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-el-form-control:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--color-yellow); background: var(--color-surface-1); color: var(--color-white); }
:is(.section-konfigurator-formular, .section-kontakt) .ff-el-help-message { margin-top: var(--space-8); font-size: var(--fs-12); font-style: normal; color: var(--color-gray-500); }

/* Auswahlfelder: echtes Input unsichtbar, Karte ist das Label */
:is(.section-konfigurator-formular, .section-kontakt) .sp-choices .ff-el-form-check { margin: 0; padding: 0; display: flex; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-choices .ff-el-form-check-label { position: relative; width: 100%; height: 100%; margin: 0; font-weight: inherit; line-height: inherit; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-choices .ff-el-form-check-label > span { display: contents; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-choices .ff-el-form-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-choices .ff-el-form-check-label:has(input:focus-visible) { outline: 2px solid var(--color-yellow); outline-offset: 2px; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-chips .ff-el-form-check { display: inline-flex; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-chips .ff-el-form-check-label { width: auto; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-extras .button--7 > .label { margin-left: auto; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-extras .stack--73 { flex: 1; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-weeks .button--20 { align-items: flex-start; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-toggle-wrap .ff-el-form-check-label a { color: var(--color-white); text-decoration: underline; text-underline-offset: 3px; }

/* Farbfelder (wie .button--10 … --19 im Export) */
:is(.section-konfigurator-formular, .section-kontakt) .sp-choices .sp-swatch-label { flex: none; width: 48px; height: 48px; border-radius: var(--radius-12); cursor: pointer; background: transparent; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-swatch { display: block; width: 100%; height: 100%; border-radius: inherit; }
:is(.section-konfigurator-formular, .section-kontakt) .sp-swatch--custom { display: flex; align-items: center; justify-content: center; font-size: var(--fs-20); color: var(--color-gray-400); background: var(--color-surface-1); box-shadow: inset 0 0 0 1px var(--color-line-3); }

/* Datei-Upload im Stil der Logo-Fläche (.card-dark--36) */
:is(.section-konfigurator-formular, .section-kontakt) .ff_file_upload_holder { width: 100%; }
:is(.section-konfigurator-formular, .section-kontakt) .ff_upload_btn.ff-btn { display: flex; width: 100%; min-height: 120px; align-items: center; justify-content: center; text-align: center; padding: var(--space-28); border-radius: var(--radius-14); border: 1px dashed var(--color-line-3); background: repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 10px, transparent 10px 20px); color: var(--color-white); font-size: var(--fs-14); font-weight: 600; box-shadow: none; cursor: pointer; transition: border-color .15s; }
:is(.section-konfigurator-formular, .section-kontakt) .ff_upload_btn.ff-btn:hover { border-color: var(--color-yellow); background-color: transparent; color: var(--color-white); }
:is(.section-konfigurator-formular, .section-kontakt) .ff-uploaded-list { margin-top: var(--space-10); }
:is(.section-konfigurator-formular, .section-kontakt) .ff-upload-preview { background: var(--color-surface-1); border: 0; border-radius: var(--radius-10); box-shadow: var(--shadow-5); color: var(--color-white); }
:is(.section-konfigurator-formular, .section-kontakt) .ff-upload-filename, :is(.section-konfigurator-formular, .section-kontakt) .ff-upload-filesize { color: var(--color-gray-400); }

/* Farbwähler */
:is(.section-konfigurator-formular, .section-kontakt) .sp-color-picker { max-width: 260px; }

/* Fehler */
:is(.section-konfigurator-formular, .section-kontakt) .ff-el-is-error .text-danger, :is(.section-konfigurator-formular, .section-kontakt) .error.text-danger { margin-top: var(--space-8); font-size: var(--fs-12); color: #FF8A70; }
:is(.section-konfigurator-formular, .section-kontakt) .ff-el-is-error .ff-el-form-control { box-shadow: inset 0 0 0 1.5px #FF8A70; }

/* Schritt-Navigation und Absenden (← Zurück / Weiter → wie im Export) */
:is(.section-konfigurator-formular, .section-kontakt) .step-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); margin-top: var(--space-8); padding-top: var(--space-22); border-top: 1px solid var(--color-line-2); }
:is(.section-konfigurator-formular, .section-kontakt) .step-nav .ff-btn-next, :is(.section-konfigurator-formular, .section-kontakt) .ff-btn-submit { margin-left: auto; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-btn { float: none; border: 0; box-shadow: none; font-family: inherit; line-height: 1; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-btn-prev { background: transparent; color: var(--color-white); font-size: var(--fs-14); padding: var(--space-8) 0; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-btn-prev:hover { background: transparent; color: var(--color-glow); }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-btn-next, :is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-btn-submit { height: 46px; padding: 0 var(--space-22); border-radius: var(--radius-pill); background: var(--color-yellow); color: var(--color-night); font-size: var(--fs-14); font-weight: 600; opacity: 1; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-btn-next:hover, :is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-btn-submit:hover { background: var(--color-glow); color: var(--color-night); }
:is(.section-konfigurator-formular, .section-kontakt) .ff_submit_btn_wrapper { margin: 0; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-step-container .step-nav + .ff_submit_btn_wrapper { display: none; }

/* Deine Auswahl: Farbfelder */
.sp-sum-swatch { display: inline-block; width: 16px; height: 16px; border-radius: var(--radius-4); margin-left: var(--space-4); vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.aside .row--94 .text-inline--171 { font-size: var(--fs-13); }

/* Schritt 1 hat kein Zurück */
:is(.section-konfigurator-formular, .section-kontakt) .fluentform-step:first-of-type .ff-btn-prev { visibility: hidden; }

/* Fluent-Forms-Spezifität überstimmen */
/* Fluent Forms setzt display:block inline, deshalb !important */
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .fluentform-step.active { display: grid !important; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform select.ff-el-form-control:not([size]):not([multiple]) { height: auto; background-color: var(--color-surface-1); color: var(--color-white); border: 0; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform select.ff-el-form-control option { background: var(--color-surface-1); color: var(--color-white); }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-el-color, :is(.section-konfigurator-formular, .section-kontakt) .fluentform .sp-color-picker input { background: var(--color-surface-1) !important; color: var(--color-white) !important; border: 0 !important; box-shadow: var(--shadow-5); border-radius: var(--radius-10); }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-btn-submit, :is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-btn-submit.ff_btn_no_style { height: 46px; padding: 0 var(--space-22); border: 0; border-radius: var(--radius-pill); background: var(--color-yellow) !important; color: var(--color-night) !important; font-size: var(--fs-14); font-weight: 600; cursor: pointer; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .ff-btn-submit:hover { background: var(--color-glow) !important; }
:is(.section-konfigurator-formular, .section-kontakt) .ff-el-tooltip { display: none; }
:is(.section-konfigurator-formular, .section-kontakt) .fluentform .step-nav .ff-btn-prev { height: 46px; padding-top: 0; padding-bottom: 0; }

/* Letzter Schritt: Fluent Forms legt Zurück + Absenden in .ff-step-t-container */
:is(.section-konfigurator-formular, .section-kontakt) .ff-step-t-container { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); margin-top: var(--space-8); padding-top: var(--space-22); border-top: 1px solid var(--color-line-2); }
:is(.section-konfigurator-formular, .section-kontakt) .ff-step-t-container .ff-t-cell { width: auto; padding: 0; flex: 1 1 auto; }
:is(.section-konfigurator-formular, .section-kontakt) .ff-step-t-container .ff-t-column-2 { flex: 0 0 auto; }
:is(.section-konfigurator-formular, .section-kontakt) .ff-step-t-container .step-nav, :is(.section-konfigurator-formular, .section-kontakt) .ff-step-t-container .ff_submit_btn_wrapper { margin: 0; padding: 0; border: 0; }

/* Fluent Forms fokussiert beim Schrittwechsel den Schrittanfang (für Screenreader) – ohne sichtbaren Rahmen */
:is(.section-konfigurator-formular, .section-kontakt) .fluentform :focus:not(:focus-visible), :is(.section-konfigurator-formular, .section-kontakt) .fluentform [tabindex="-1"]:focus, :is(.section-konfigurator-formular, .section-kontakt) .fluentform .fluentform-step:focus { outline: none; }

/* Kontaktformular (ohne Schritte): gleiches 6er-Raster */
.section-kontakt .frm-fluent-form fieldset { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--space-12); row-gap: var(--space-24); margin: 0; padding: 0; border: 0; min-width: 0; }
.section-kontakt .frm-fluent-form fieldset > * { grid-column: 1 / -1; }
.section-kontakt .frm-fluent-form fieldset > .sp-half { grid-column: span 3; }
@media (max-width: 640px) { .section-kontakt .frm-fluent-form fieldset > .sp-half { grid-column: 1 / -1; } }
.section-kontakt .sp-consent { color: var(--color-gray-500); }
.section-kontakt .ff_submit_btn_wrapper { display: flex; justify-content: flex-end; margin: 0; }

/* Kontakt-Danke: Button in der Karte in natürlicher Breite */
.section-kontakt-danke .card-dark--35 .btn-primary--9 { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; margin-top: var(--space-8); }