/* Kontakt und Vergleichsangebot wie webwacker.de/kontakt/ (inc/einmal-kontakt-neu.php, #174).
   Formular in nummerierten Schritten mit Auswahl-Chips (Fluent Forms), rechts Karten. Lädt nur auf /kontakt/ und /vergleichsangebot/. */

/* Spalten: Formular links, Karten rechts */
@media (min-width:1025px){
  .dlh-kontakt-spalten>.e-con-inner>.dlh-kontakt-formkarte,.dlh-kontakt-spalten>.dlh-kontakt-formkarte{flex:1 1 0;min-width:0}
  .dlh-kontakt-spalten>.e-con-inner>.dlh-kontakt-seite,.dlh-kontakt-spalten>.dlh-kontakt-seite{flex:0 0 34%;width:34%}
}
@media (max-width:1024px){.dlh-kontakt-spalten>.e-con-inner>*,.dlh-kontakt-spalten>*{width:100%!important;flex-basis:100%!important}}
.dlh-kontakt-formkarte,.dlh-kontakt-karte{border-radius:16px;box-shadow:0 2px 4px rgba(21,49,79,.05),0 12px 32px rgba(21,49,79,.08)}
.dlh-kontakt-karte .eyebrow{margin-bottom:4px}
.dlh-kontakt-karte__titel .elementor-heading-title{font-size:1.25rem!important;line-height:1.3!important}
.dlh-kontakt-karte__label .elementor-heading-title{font-family:inherit!important;font-weight:600!important;font-size:.75rem!important;letter-spacing:.08em;text-transform:uppercase;color:#5b6b7c!important;margin-top:6px}
.dlh-kontakt-karte .elementor-widget-button{margin:0!important}
.dlh-kontakt-karte__text p:last-child{margin-bottom:0}
.dlh-nummern{list-style:none;counter-reset:dlh-n;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.dlh-nummern li{counter-increment:dlh-n;position:relative;padding-left:2.25rem;line-height:1.5}
.dlh-nummern li::before{content:counter(dlh-n,decimal-leading-zero);position:absolute;left:0;top:.15em;font-size:.8rem;font-weight:700;letter-spacing:.06em;color:#2A619C}
.dlh-pfeile{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dlh-pfeile li{position:relative;padding-left:1.5rem;line-height:1.5}
.dlh-pfeile li::before{content:"→";position:absolute;left:0;color:#2A619C;font-weight:600}

/* Schritte im Formular */
.dlh-form-schritte .dlh-schritt-feld{margin-bottom:8px!important}
.dlh-form-schritte .dlh-schritt-feld:not(:first-child){margin-top:20px}
.dlh-form-schritte .ff-el-group .dlh-form-schritt,.dlh-form-schritt{display:flex;align-items:baseline;gap:12px;margin:0;font-weight:600!important;font-size:1.125rem;line-height:1.3;color:#15314F}
.dlh-form-schritt span{font-size:.8rem;font-weight:700;letter-spacing:.06em;color:#2A619C}
.dlh-form-schritt small{font-size:.9rem;font-weight:400;color:#5b6b7c}

/* Chips: Checkbox/Radio als Pillen; Gruppenname bleibt für Screenreader */
.dlh-form-schritte .dlh-chips>.ff-el-input--label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dlh-form-schritte .dlh-chips .ff-el-input--content{display:flex;flex-wrap:wrap;gap:8px}
.dlh-form-schritte .dlh-chips .ff-el-form-check{margin:0!important;padding:0!important}
.dlh-form-schritte .dlh-chips .ff-el-form-check-label{position:relative;display:inline-flex;align-items:center;min-height:42px;margin:0;padding:0 16px;border:1.5px solid #cdd5de;border-radius:999px;background:#fff;font-size:.95rem;font-weight:500;color:#15314F;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
/* clip-path statt opacity:0: Häkchen unsichtbar, bleibt aber ein normales Feld (Formular-Test hält opacity:0 für eine Spamfalle) */
.dlh-form-schritte .dlh-chips .ff-el-form-check-input{position:absolute;inset:0;width:100%;height:100%;margin:0;clip-path:inset(50%);cursor:pointer}
.dlh-form-schritte .dlh-chips .ff-el-form-check-label:hover{border-color:#2A619C}
.dlh-form-schritte .dlh-chips .ff-el-form-check-label:has(input:checked){background:#15314F;border-color:#15314F;color:#fff}
.dlh-form-schritte .dlh-chips .ff-el-form-check-label:has(input:focus-visible){outline:3px solid #2A619C;outline-offset:2px}
.dlh-form-schritte .dlh-chips .ff-el-form-check-label span{margin:0!important;padding:0!important}

/* Upload als Ablagefeld */
.dlh-form-schritte .dlh-ablage .ff_file_upload_holder{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:140px;padding:24px 16px;border:1.5px dashed #cdd5de;border-radius:16px;background:#f7f8fa;text-align:center;transition:border-color .15s,background-color .15s}
.dlh-form-schritte .dlh-ablage .ff_file_upload_holder:hover,.dlh-form-schritte .dlh-ablage .ff_file_upload_holder.dlh-ziehen{border-color:#2A619C;background:#eef3f9}
.dlh-form-schritte .dlh-ablage .ff_upload_btn{border-radius:8px}
.dlh-ablage__hinweis{margin:-6px 0 0;font-size:.9rem;color:#5b6b7c}

/* Abschnitt „Was wir prüfen“ */
.dlh-pruefraster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
@media (max-width:1024px){.dlh-pruefraster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dlh-pruefraster{grid-template-columns:minmax(0,1fr)}}
.dlh-pruefkarte{padding:24px;border:1px solid #e3e7ec;border-radius:16px;background:#fff}
.dlh-pruefkarte span{font-size:.8rem;font-weight:700;letter-spacing:.06em;color:#2A619C}
.dlh-pruefkarte h3{margin:8px 0 6px;font-size:1.125rem;line-height:1.3;color:#15314F}
.dlh-pruefkarte p{margin:0;font-size:.95rem;line-height:1.55}

/* Knöpfe in den Karten linksbündig (z. B. Telefonnummer) */
.dlh-kontakt-karte .elementor-button-wrapper{text-align:left!important}
.dlh-kontakt-karte .elementor-button{justify-content:flex-start}
.dlh-kontakt-karte .elementor-widget-button .elementor-button-content-wrapper{justify-content:flex-start}

/* Abschnittsüberschriften auf /vergleichsangebot/ */
.dlh-vergleich-abschnitt .dlh-kontakt-karte__titel .elementor-heading-title{font-size:clamp(1.75rem,1.1rem + 1.5vw,2.5rem)!important;line-height:1.2!important}
.dlh-kontakt-karte .elementor-widget-button{width:auto!important;max-width:100%;align-self:flex-start}
.dlh-kontakt-karte .elementor-widget-button .elementor-button-wrapper{display:flex;justify-content:flex-start}
.dlh-kontakt-karte .elementor-button{font-size:.95rem!important;line-height:1.3!important}

/* Karte „Direkt“ ruhiger (27.10., #175): Elementor gibt dem Widget-Container margin-bottom:-10px, das quetschte Bezeichnung und Wert.
   Jetzt: Bezeichnung klein über dem Wert (4 px), zwischen den Blöcken 22 px, alle Werte gleich groß, gleichfarbig, gleich schwer */
.dlh-kontakt-karte:has(.dlh-kontakt-karte__label){row-gap:0}
.dlh-kontakt-karte:has(.dlh-kontakt-karte__label)>.elementor-widget:first-child{margin-bottom:6px}
.dlh-kontakt-karte .dlh-kontakt-karte__label{margin:22px 0 4px!important}
.dlh-kontakt-karte .elementor-widget-html+.dlh-kontakt-karte__label{margin-top:14px!important}
.dlh-kontakt-karte .dlh-kontakt-karte__label>.elementor-widget-container,.dlh-kontakt-karte__label+.elementor-widget>.elementor-widget-container{margin:0!important}
.dlh-kontakt-karte .dlh-kontakt-karte__label .elementor-heading-title{margin:0!important;line-height:1.3!important}
.dlh-kontakt-karte__label+.elementor-widget{margin:0!important}
.dlh-kontakt-karte__label+.elementor-widget-button .elementor-button{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;font-size:1rem!important;font-weight:500!important;line-height:1.5!important;color:#15314F!important}
.dlh-kontakt-karte__label+.elementor-widget-button .elementor-button-icon{display:none}
.dlh-kontakt-karte__label+.elementor-widget-icon-list .elementor-icon-list-item{padding:0!important;margin:0!important}
.dlh-kontakt-karte__label+.elementor-widget-icon-list .elementor-icon-list-items{gap:2px}
.dlh-kontakt-karte__label+.elementor-widget-icon-list .elementor-icon-list-text{padding:0!important;font-size:1rem!important;font-weight:500!important;line-height:1.5!important;color:#15314F!important}