/* ==========================================================================
   wp Leadermacher — Formularstil

   Der erste Teil ist aus dem real ausgelieferten Kunden-Stylesheet des
   Altsystems uebernommen (tool.css der aktuellen von fuenf Generationen,
   95 von 128 Kunden). Damit ist die Optik nicht nachgebaut, sondern dieselbe.

   Geaendert wurde nur:
     - alles unter .wplm einsortiert, damit nichts ins Theme ausblutet
     - kundenspezifische Werte als CSS-Eigenschaften (--wplm-*)
     - die Sammelgrafik durch Einzelbilder in WebP ersetzt
     - Regeln der abgeloesten jQuery-Plugins entfernt

   Der zweite Teil ersetzt, was frueher aus Fremdbibliotheken kam.
   ========================================================================== */

/**
* Innerhalb der Slides
*/
/* ==========================================================================
   Abschirmung gegen das Theme.

   Im Altsystem lief das Formular in einem iframe und war damit von jedem
   fremden Stylesheet getrennt. Ohne iframe greifen jetzt Theme- und
   WordPress-Regeln hinein — WordPress setzt zum Beispiel als globale Vorgabe
   h1…h6 { line-height: 1.125 }, wodurch jede Ueberschrift 3px flacher wird
   und alles darunter nach oben rutscht.

   Dieser Block stellt die Ausgangslage wieder her, die der iframe geschenkt
   hat. Er steht bewusst VOR den uebernommenen Regeln: Theme-Regeln auf
   Elementebene verlieren dagegen, die eigenen Regeln des Werkzeugs gewinnen.
   ========================================================================== */

.wplm h1, .wplm h2, .wplm h3, .wplm h4, .wplm h5, .wplm h6,
.wplm p, .wplm ul, .wplm ol, .wplm li, .wplm label, .wplm span,
.wplm div, .wplm output, .wplm form {
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.wplm h1, .wplm h2, .wplm h3, .wplm h4, .wplm h5, .wplm h6 {
  clear: none;
  color: inherit;
  font-family: inherit;
  font-weight: 700;
}

/* Die Aussenabstaende der Textelemente kamen im iframe vom Browser und stehen
   deshalb nirgends im uebernommenen Stylesheet. Fast jedes Theme setzt aber
   h1…h6, p { margin: 0 } — dann klebt die erste Ueberschrift am oberen Rand
   des Werkzeugs, waehrend links, rechts und unten der Innenabstand steht.
   Hier stehen die Werte, die der Browser selbst vergibt, damit sie kein Theme
   mehr wegnehmen kann. */
.wplm h1 { margin: 0.67em 0; }
.wplm h2 { margin: 0.83em 0; }
.wplm h3 { margin: 1em 0; }
.wplm h4 { margin: 1.33em 0; }
.wplm h5 { margin: 1.67em 0; }
.wplm h6 { margin: 2.33em 0; }

.wplm p, .wplm ul, .wplm ol {
  margin: 1em 0;
}

/* Das erste Element eines Schritts bringt keinen eigenen Rand mit — sonst
   stehen oben Innenabstand und Ueberschriftsrand uebereinander und der Abstand
   waere groesser als an den Seiten. */
.wplm .ivf_wrap .step > *:first-child,
.wplm .ivf_wrap .step > *:first-child > h2:first-child {
  margin-top: 0;
}

.wplm li {
  margin: 0;
}

.wplm ul, .wplm ol {
  padding-left: 40px;
  list-style-position: outside;
}

.wplm input, .wplm select, .wplm textarea, .wplm button {
  max-width: none;
  min-height: 0;
  font-family: inherit;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: none;
  outline-offset: 0;
}

/* Die Schriftfarbe der Eingabefelder kam im iframe vom Browser (schwarz) und
   steht deshalb nirgends im uebernommenen Stylesheet. Ein Theme mit
   input { color: #888 } faerbt sonst jede eingegebene Zahl grau. */
.wplm input, .wplm select, .wplm textarea {
  color: #000000;
}

/* Kaestchen und Punkte zeichnet der Browser. Themes schalten das gern mit
   appearance: none ab und malen eigene — dann passt nichts mehr zusammen. */
.wplm input[type="checkbox"], .wplm input[type="radio"] {
  appearance: auto;
}

/* Größe und Ausrichtung zurücksetzen, aber NICHT den Aussenabstand: der
   3px-Standard des Browsers bestimmt die Zeilenhöhe der Einwilligungstexte
   mit. Wird er überschrieben, rutscht der Absenden-Knopf um zwei Pixel. */
.wplm input[type="checkbox"], .wplm input[type="radio"] {
  width: auto;
  height: auto;
  vertical-align: baseline;
}

.wplm a {
  box-shadow: none;
}

.wplm img, .wplm svg {
  max-width: none;
}


.wplm .ivf_wrap {
  /**
  * Steps
  */
  /**
  * Radio Icons
  */
  /**
  * Switchbutton
  */
  /**
  * Rangeslider + Rangeinputs
  */
  /**
  * Row-Cell-Framework
  */
  /**
  * Kontakt
  */ }
  .wplm .ivf_wrap label._error {
    display: none !important; }
  .ivf_wrap input[type="text"],
  .ivf_wrap select.mobile,
  .wplm .ivf_wrap select.simulate_mobile {
    box-sizing: border-box;
    font-family: var(--wplm-schrift);
    font-size: .85em;
    width: 100%;
    background: var(--wplm-input-bg);
    border: 1px solid var(--wplm-input-rahmen);
    outline: 0 none;
    -webkit-border-radius: var(--wplm-input-radius, 2px);
    -moz-border-radius: var(--wplm-input-radius, 2px);
    border-radius: var(--wplm-input-radius, 2px);
    -webkit-box-shadow: inset 1px 1px 1px 0px #aaa, inset 1px 1px 0px -1px #777;
    box-shadow: inset 1px 1px 1px 0px #aaa, inset 1px 1px 0px -1px #777;
    padding: var(--wplm-input-padding, 13px 15px); }
    .ivf_wrap input[type="text"]::-webkit-input-placeholder,
    .ivf_wrap select.mobile::-webkit-input-placeholder,
    .wplm .ivf_wrap select.simulate_mobile::-webkit-input-placeholder {
      color: #b0b0b0;
      font-style: italic; }
    .ivf_wrap input[type="text"]:-moz-placeholder,
    .ivf_wrap select.mobile:-moz-placeholder,
    .wplm .ivf_wrap select.simulate_mobile:-moz-placeholder {
      color: #b0b0b0;
      font-style: italic; }
    .ivf_wrap input[type="text"]::-moz-placeholder,
    .ivf_wrap select.mobile::-moz-placeholder,
    .wplm .ivf_wrap select.simulate_mobile::-moz-placeholder {
      color: #b0b0b0;
      font-style: italic; }
    .ivf_wrap input[type="text"]:-ms-input-placeholder,
    .ivf_wrap select.mobile:-ms-input-placeholder,
    .wplm .ivf_wrap select.simulate_mobile:-ms-input-placeholder {
      color: #b0b0b0;
      font-style: italic; }
    .ivf_wrap input[type="text"]:focus::-webkit-input-placeholder,
    .ivf_wrap select.mobile:focus::-webkit-input-placeholder,
    .wplm .ivf_wrap select.simulate_mobile:focus::-webkit-input-placeholder {
      color: var(--wplm-input-bg); }
    .ivf_wrap input[type="text"]:focus:-moz-placeholder,
    .ivf_wrap select.mobile:focus:-moz-placeholder,
    .wplm .ivf_wrap select.simulate_mobile:focus:-moz-placeholder {
      color: var(--wplm-input-bg); }
    .ivf_wrap input[type="text"]:focus::-moz-placeholder,
    .ivf_wrap select.mobile:focus::-moz-placeholder,
    .wplm .ivf_wrap select.simulate_mobile:focus::-moz-placeholder {
      color: var(--wplm-input-bg); }
    .ivf_wrap input[type="text"]:focus:-ms-input-placeholder,
    .ivf_wrap select.mobile:focus:-ms-input-placeholder,
    .wplm .ivf_wrap select.simulate_mobile:focus:-ms-input-placeholder {
      color: var(--wplm-input-bg); }
    .ivf_wrap input[type="text"]._error,
    .ivf_wrap select.mobile._error,
    .wplm .ivf_wrap select.simulate_mobile._error {
      background: var(--wplm-input-fehler);
      -webkit-box-shadow: inset 1px 1px 3px 0px #676767 !important;
      box-shadow: inset 1px 1px 3px 0px #676767 !important; }
      .ivf_wrap input[type="text"]._error::-webkit-input-placeholder,
      .ivf_wrap select.mobile._error::-webkit-input-placeholder,
      .wplm .ivf_wrap select.simulate_mobile._error::-webkit-input-placeholder {
        color: #ffffff; }
      .ivf_wrap input[type="text"]._error:-moz-placeholder,
      .ivf_wrap select.mobile._error:-moz-placeholder,
      .wplm .ivf_wrap select.simulate_mobile._error:-moz-placeholder {
        color: #ffffff; }
      .ivf_wrap input[type="text"]._error::-moz-placeholder,
      .ivf_wrap select.mobile._error::-moz-placeholder,
      .wplm .ivf_wrap select.simulate_mobile._error::-moz-placeholder {
        color: #ffffff; }
      .ivf_wrap input[type="text"]._error:-ms-input-placeholder,
      .ivf_wrap select.mobile._error:-ms-input-placeholder,
      .wplm .ivf_wrap select.simulate_mobile._error:-ms-input-placeholder {
        color: #ffffff; }
      .ivf_wrap input[type="text"]._error:focus::-webkit-input-placeholder,
      .ivf_wrap select.mobile._error:focus::-webkit-input-placeholder,
      .wplm .ivf_wrap select.simulate_mobile._error:focus::-webkit-input-placeholder {
        color: var(--wplm-input-fehler); }
      .ivf_wrap input[type="text"]._error:focus:-moz-placeholder,
      .ivf_wrap select.mobile._error:focus:-moz-placeholder,
      .wplm .ivf_wrap select.simulate_mobile._error:focus:-moz-placeholder {
        color: var(--wplm-input-fehler); }
      .ivf_wrap input[type="text"]._error:focus::-moz-placeholder,
      .ivf_wrap select.mobile._error:focus::-moz-placeholder,
      .wplm .ivf_wrap select.simulate_mobile._error:focus::-moz-placeholder {
        color: var(--wplm-input-fehler); }
      .ivf_wrap input[type="text"]._error:focus:-ms-input-placeholder,
      .ivf_wrap select.mobile._error:focus:-ms-input-placeholder,
      .wplm .ivf_wrap select.simulate_mobile._error:focus:-ms-input-placeholder {
        color: var(--wplm-input-fehler); }
  .wplm .ivf_wrap input[type="checkbox"]._error {
    -webkit-box-shadow: 0 0 0 2px var(--wplm-input-fehler);
    box-shadow: 0 0 0 2px var(--wplm-input-fehler); }
  .wplm .ivf_wrap h2 {
    font-weight: 400;
    font-size: 1.25em;
    color: #000000; }
    .wplm .ivf_wrap h2 strong {
      font-weight: 700; }
    .wplm .ivf_wrap h2.sub {
      margin-top: 30px; }
    .wplm .ivf_wrap h2:before {
      display: block;
      content: '';
      clear: both; }
  .wplm .ivf_wrap .step {
    position: relative;
    display: none;
    min-height: 402px;
    -webkit-animation-duration: 0.3s !important;
    animation-duration: 0.3s !important; }
    .wplm .ivf_wrap .step.shake {
      -webkit-animation-duration: 0.6s !important;
      animation-duration: 0.6s !important; }
    .wplm .ivf_wrap .step.active {
      display: block; }
  .wplm .ivf_wrap .radio-icons {
    display: none;
    justify-content: space-between; }
    .wplm .ivf_wrap .radio-icons .radio-icon {
      position: relative;
      display: inline-block;
      width: 104px;
      height: 121px;
      margin-bottom: 30px;
      cursor: pointer; }
      .wplm .ivf_wrap .radio-icons .radio-icon input {
        display: none; }
      .wplm .ivf_wrap .radio-icons .radio-icon:before {
        position: absolute;
        display: block;
        width: 100%;
        height: 100%;
        content: '';
        -webkit-transition: background 300ms ease;
        -moz-transition: background 300ms ease;
        -ms-transition: background 300ms ease;
        -o-transition: background 300ms ease;
        transition: background 300ms ease;
        background: url("../img/choose_bg.webp") no-repeat center center; }
      .wplm .ivf_wrap .radio-icons .radio-icon:after {
        position: absolute;
        display: block;
        top: 100%;
        width: 130%;
        margin-left: -15%;
        content: attr(data-title);
        font-size: .75em;
        line-height: 1.2;
        color: #7b7b7b;
        margin-top: 5px;
        text-align: center;
        text-transform: uppercase; }
      .wplm .ivf_wrap .radio-icons .radio-icon:hover:before, .wplm .ivf_wrap .radio-icons .radio-icon.active:before {
        background: url("../img/choose_bg_active.webp") no-repeat center center; }
      .wplm .ivf_wrap .radio-icons .radio-icon:hover:after, .wplm .ivf_wrap .radio-icons .radio-icon.active:after {
        color: #000000; }
  .wplm .ivf_wrap .radio-icon-symbol {
    position: absolute;
    background-repeat: no-repeat;
    /*Dachdecker*/
    /*Sanitaer*/ }
    .wplm .ivf_wrap .radio-icon-symbol.questmark {
      top: 48px;
      left: 44px;
      width: 14px;
      height: 26px;
      background-image: url("../img/questmark.png");
      background-image: image-set(url("../img/questmark.webp") type("image/webp"), url("../img/questmark.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.haus {
      top: 22px;
      left: 12px;
      width: 84px;
      height: 73px;
      background-image: url("../img/haus.png");
      background-image: image-set(url("../img/haus.webp") type("image/webp"), url("../img/haus.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.wohnung {
      top: 16px;
      left: 24px;
      width: 69px;
      height: 85px;
      background-image: url("../img/wohnung.png");
      background-image: image-set(url("../img/wohnung.webp") type("image/webp"), url("../img/wohnung.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.gewerbe {
      top: 23px;
      left: 16px;
      width: 82px;
      height: 78px;
      background-image: url("../img/gewerbe.png");
      background-image: image-set(url("../img/gewerbe.webp") type("image/webp"), url("../img/gewerbe.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.grundstueck {
      top: 35px;
      left: 5px;
      width: 94px;
      height: 54px;
      background-image: url("../img/grundstueck.png");
      background-image: image-set(url("../img/grundstueck.webp") type("image/webp"), url("../img/grundstueck.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.garage {
      top: 31px;
      left: 9px;
      width: 89px;
      height: 56px;
      background-image: url("../img/garage.png");
      background-image: image-set(url("../img/garage.webp") type("image/webp"), url("../img/garage.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.carport {
      top: 31px;
      left: 8px;
      width: 89px;
      height: 57px;
      background-image: url("../img/carport.png");
      background-image: image-set(url("../img/carport.webp") type("image/webp"), url("../img/carport.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.stellplatz {
      top: 31px;
      left: 8px;
      width: 90px;
      height: 55px;
      background-image: url("../img/stellplatz.png");
      background-image: image-set(url("../img/stellplatz.webp") type("image/webp"), url("../img/stellplatz.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.keine {
      top: 34px;
      left: 8px;
      width: 89px;
      height: 54px;
      background-image: url("../img/keine.png");
      background-image: image-set(url("../img/keine.webp") type("image/webp"), url("../img/keine.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.ebk_neuwertig {
      top: 32px;
      left: 22px;
      width: 59px;
      height: 59px;
      background-image: url("../img/ebk_neuwertig.png");
      background-image: image-set(url("../img/ebk_neuwertig.webp") type("image/webp"), url("../img/ebk_neuwertig.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.ebk_genutzt {
      top: 32px;
      left: 22px;
      width: 59px;
      height: 59px;
      background-image: url("../img/ebk_genutzt.png");
      background-image: image-set(url("../img/ebk_genutzt.webp") type("image/webp"), url("../img/ebk_genutzt.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.ebk_keine {
      top: 32px;
      left: 22px;
      width: 59px;
      height: 59px;
      background-image: url("../img/ebk_keine.png");
      background-image: image-set(url("../img/ebk_keine.webp") type("image/webp"), url("../img/ebk_keine.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.gebart_buero_lager {
      top: 32px;
      left: 26px;
      width: 51px;
      height: 59px;
      background-image: url("../img/gebart_buero_lager.png");
      background-image: image-set(url("../img/gebart_buero_lager.webp") type("image/webp"), url("../img/gebart_buero_lager.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.gebart_wohn_geschaeft {
      top: 32px;
      left: 26px;
      width: 51px;
      height: 54px;
      background-image: url("../img/gebart_wohn_geschaeft.png");
      background-image: image-set(url("../img/gebart_wohn_geschaeft.webp") type("image/webp"), url("../img/gebart_wohn_geschaeft.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.gebart_industrie_gewerbe {
      top: 32px;
      left: 26px;
      width: 51px;
      height: 55px;
      background-image: url("../img/gebart_industrie_gewerbe.png");
      background-image: image-set(url("../img/gebart_industrie_gewerbe.webp") type("image/webp"), url("../img/gebart_industrie_gewerbe.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.erschlossen {
      top: 32px;
      left: 26px;
      width: 54px;
      height: 51px;
      background-image: url("../img/erschlossen.png");
      background-image: image-set(url("../img/erschlossen.webp") type("image/webp"), url("../img/erschlossen.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.teilerschlossen {
      top: 32px;
      left: 26px;
      width: 56px;
      height: 52px;
      background-image: url("../img/teilerschlossen.png");
      background-image: image-set(url("../img/teilerschlossen.webp") type("image/webp"), url("../img/teilerschlossen.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.unerschlossen {
      top: 32px;
      left: 26px;
      width: 57px;
      height: 53px;
      background-image: url("../img/unerschlossen.png");
      background-image: image-set(url("../img/unerschlossen.webp") type("image/webp"), url("../img/unerschlossen.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.bebauung_kurzfristig {
      top: 35px;
      left: 16px;
      width: 78px;
      height: 51px;
      background-image: url("../img/bebauung_kurzfristig.png");
      background-image: image-set(url("../img/bebauung_kurzfristig.webp") type("image/webp"), url("../img/bebauung_kurzfristig.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.bebauung_eingeschraenkt {
      top: 34px;
      left: 16px;
      width: 78px;
      height: 52px;
      background-image: url("../img/bebauung_eingeschraenkt.png");
      background-image: image-set(url("../img/bebauung_eingeschraenkt.webp") type("image/webp"), url("../img/bebauung_eingeschraenkt.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.bebauung_nein {
      top: 39px;
      left: 16px;
      width: 78px;
      height: 48px;
      background-image: url("../img/bebauung_nein.png");
      background-image: image-set(url("../img/bebauung_nein.webp") type("image/webp"), url("../img/bebauung_nein.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.grd_eck {
      top: 35px;
      left: 16px;
      width: 74px;
      height: 45px;
      background-image: url("../img/grd_eck.png");
      background-image: image-set(url("../img/grd_eck.webp") type("image/webp"), url("../img/grd_eck.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.grd_rechteck {
      top: 36px;
      left: 15px;
      width: 74px;
      height: 48px;
      background-image: url("../img/grd_rechteck.png");
      background-image: image-set(url("../img/grd_rechteck.webp") type("image/webp"), url("../img/grd_rechteck.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}
    .wplm .ivf_wrap .radio-icon-symbol.grd_sonstiges {
      top: 36px;
      left: 16px;
      width: 73px;
      height: 47px;
      background-image: url("../img/grd_sonstiges.png");
      background-image: image-set(url("../img/grd_sonstiges.webp") type("image/webp"), url("../img/grd_sonstiges.png") type("image/png"));
      background-position: 0 0;
      background-size: contain;}

















  .wplm .ivf_wrap .switch {
    position: relative;
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: 9px; }
    .wplm .ivf_wrap .switch.wrapped {
      border: 1px solid #d7d7d7;
      padding: 10px 15px;
      -webkit-border-radius: var(--wplm-input-radius, 2px);
      -moz-border-radius: var(--wplm-input-radius, 2px);
      border-radius: var(--wplm-input-radius, 2px); }
    .wplm .ivf_wrap .switch.full {
      float: none;
      width: 100%;
      margin-left: 0 !important;
      margin-right: 0 !important; }
    .wplm .ivf_wrap .switch:after {
      display: block;
      content: ' ';
      clear: both; }
    .wplm .ivf_wrap .switch > span {
      float: left;
      cursor: pointer;
      line-height: 25px; }
    .wplm .ivf_wrap .switch .switch-button {
      float: right;
      position: relative;
      display: inline-block;
      width: 55px;
      height: 25px; }
      .wplm .ivf_wrap .switch .switch-button input {
        display: none; }
      .wplm .ivf_wrap .switch .switch-button .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #d0d0d0;
        -webkit-transition: .4s;
        transition: .4s;
        -webkit-box-shadow: inset 1px 1px 3px 0px #ababab;
        box-shadow: inset 1px 1px 3px 0px #ababab;
        -webkit-border-radius: var(--wplm-input-radius, 2px);
        -moz-border-radius: var(--wplm-input-radius, 2px);
        border-radius: var(--wplm-input-radius, 2px); }
        .wplm .ivf_wrap .switch .switch-button .slider:before {
          position: absolute;
          content: "";
          height: 23px;
          width: 20px;
          left: 1px;
          bottom: 1px;
          background-color: white;
          -webkit-transition: .4s;
          transition: .4s; }
        .wplm .ivf_wrap .switch .switch-button .slider.radio {
          border-radius: 10px; }
          .wplm .ivf_wrap .switch .switch-button .slider.radio:before {
            border-radius: 30px; }
      .wplm .ivf_wrap .switch .switch-button input:checked + .slider {
        background-color: var(--wplm-hauptfarbe); }
        .wplm .ivf_wrap .switch .switch-button input:checked + .slider:before {
          -webkit-transform: translateX(33px);
          -ms-transform: translateX(33px);
          transform: translateX(33px); }
      .wplm .ivf_wrap .switch .switch-button input:focus + .slider {
        box-shadow: 0 0 1px var(--wplm-hauptfarbe); }
  .wplm .ivf_wrap .range-slider-box {
    width: 100%;
    height: 85px; }
    .wplm .ivf_wrap .range-slider-box > div {
      float: left; }
    .wplm .ivf_wrap .range-slider-box:after {
      display: block;
      content: '';
      clear: both; }
  .wplm .ivf_wrap .range-icon {
    display: none;
    width: 25%; }
    .wplm .ivf_wrap .range-icon .radio-icon-symbol {
      top: 0;
      left: 0;
      position: relative; }
  .wplm .ivf_wrap .range-slider {
    display: none;
    width: 45%;
    padding-top: 29px; }
    .wplm .ivf_wrap .range-slider .range-slider-label {
      margin-top: 3px; }
      .wplm .ivf_wrap .range-slider .range-slider-label > div {
        float: left;
        width: 50%;
        font-size: .8em; }
      .wplm .ivf_wrap .range-slider .range-slider-label .range-slider-label-right {
        text-align: right; }
    .wplm .ivf_wrap .range-slider .range-slider-bar {
      padding: 0; }
      .wplm .ivf_wrap .range-slider .range-slider-bar .mb_sliderBar {
        width: 100%;
        height: 6px;
        background: #e4e4e4;
        -webkit-box-shadow: inset 1px 1px 1px -1px #202e2e;
        box-shadow: inset 1px 1px 1px -1px #202e2e; }
        .wplm .ivf_wrap .range-slider .range-slider-bar .mb_sliderBar .mb_sliderValueLabel {
          margin-top: -25px;
          border: 0 none;
          padding: 7px 9px;
          color: #FFFFFF;
          text-shadow: 1px 1px 1px #717171;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          background: var(--wplm-hauptfarbe); }
          .wplm .ivf_wrap .range-slider .range-slider-bar .mb_sliderBar .mb_sliderValueLabel:after {
            top: 100%;
            left: 17%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
            border-color: rgba(224, 143, 0, 0);
            border-top-color: var(--wplm-hauptfarbe);
            border-width: 5px;
            margin-left: -5px; }
        .wplm .ivf_wrap .range-slider .range-slider-bar .mb_sliderBar .mb_sliderHandler {
          border-radius: 10px;
          padding: 7px 10px;
          top: -7px;
          background: var(--wplm-hauptfarbe); }
        .wplm .ivf_wrap .range-slider .range-slider-bar .mb_sliderBar .mb_sliderRange {
          background: var(--wplm-hauptfarbe);
          -webkit-box-shadow: inset 1px 1px 1px -1px #202e2e;
          box-shadow: inset 1px 1px 1px -1px #202e2e; }
  .wplm .ivf_wrap .range-input {
    width: 100%; }
    .wplm .ivf_wrap .range-input .range-input-label {
      display: none;
      color: #aeaeae;
      font-size: .8em;
      margin-bottom: 1px; }
    .ivf_wrap .range-input .range-input-wrap,
    .wplm .ivf_wrap .range-input .range-input-type {
      box-sizing: border-box;
      height: 50px;
      float: left;
      -webkit-box-shadow: inset 1px 1px 5px -1px #676767;
      box-shadow: inset 1px 1px 5px -1px #676767; }
    .wplm .ivf_wrap .range-input .range-input-type {
      font-size: .83em;
      border-left: 0 none;
      background: #e7e7e7;
      color: #6f6f6f;
      width: 30%;
      text-align: center;
      padding-top: 10px;
      -webkit-border-radius: 0 3px 3px 0;
      border-radius: 0 3px 3px 0;
      -webkit-box-shadow: inset 0px 2px 3px -2px #676767;
      box-shadow: inset 0px 2px 3px -2px #676767; }
      .wplm .ivf_wrap .range-input .range-input-type.big {
        width: 60%; }
    .wplm .ivf_wrap .range-input .range-input-wrap {
      width: 70%;
      -webkit-border-radius: 2px 0 0 2px;
      border-radius: 2px 0 0 2px; }
      .wplm .ivf_wrap .range-input .range-input-wrap.small {
        width: 40%; }
      .wplm .ivf_wrap .range-input .range-input-wrap.full {
        width: 100%;
        -webkit-border-radius: var(--wplm-input-radius, 2px);
        border-radius: var(--wplm-input-radius, 2px); }
      .wplm .ivf_wrap .range-input .range-input-wrap input[type="text"] {
        -webkit-border-radius: 2px 0 0 2px;
        -moz-border-radius: 2px 0 0 2px;
        border-radius: 2px 0 0 2px;
        border: 0 none;
        height: 50px; }
  .wplm .ivf_wrap .ivf-input-row:after {
    display: block;
    content: ' ';
    clear: both; }
  .wplm .ivf_wrap .ivf-input-row .ivf-input-cell {
    float: left;
    width: 100%;
    margin-bottom: 20px; }
    .wplm .ivf_wrap .ivf-input-row .ivf-input-cell > label:after {
      display: block;
      content: ' ';
      clear: both; }
    .wplm .ivf_wrap .ivf-input-row .ivf-input-cell > label input[type="checkbox"] {
      float: left;
      position: relative;
      top: 5px;
      width: 15px;
      margin-right: 10px; }
    .wplm .ivf_wrap .ivf-input-row .ivf-input-cell > label span {
      font-size: .9em;
      line-height: 1.6em;
      float: right;
      width: calc(100% - 30px); }
  .wplm .ivf_wrap .ivf-input-row.cell-bottom {
    margin-bottom: 10px; }
  .wplm .ivf_wrap .ivf-input-row.m12 {
    margin-top: 12px; }
  .wplm .ivf_wrap .ivf-input-row.m33 {
    margin-top: 33px; }
  .wplm .ivf_wrap .kontakt {
    font-size: .9em; }
    .wplm .ivf_wrap .kontakt h3 {
      margin: 34px 0 10px; }
      .wplm .ivf_wrap .kontakt h3 + .ivf-infobox {
        margin-top: 0; }
    .wplm .ivf_wrap .kontakt .info {
      display: inline-block;
      position: relative;
      padding-left: 10px;
      font-size: .75em;
      line-height: 1.2;
      color: #5c5c5c; }
      .wplm .ivf_wrap .kontakt .info > i {
        position: absolute;
        left: -7px;
        top: 1px; }
    .wplm .ivf_wrap .kontakt input[type="text"] {
      padding: 9px 11px; }
    .ivf_wrap .kontakt .contact-left,
    .wplm .ivf_wrap .kontakt .contact-right {
      float: none;
      width: 100%;
      margin-right: 0; }
    .wplm .ivf_wrap .kontakt .ivf-infobox {
      margin-top: 32px; }
      .wplm .ivf_wrap .kontakt .ivf-infobox ul {
        margin: 0;
        padding-left: 20px; }
        .wplm .ivf_wrap .kontakt .ivf-infobox ul li {
          position: relative;
          list-style: outside none none; }
          .wplm .ivf_wrap .kontakt .ivf-infobox ul li:before {
            position: absolute;
            left: -20px;
            top: 0;
            content: '\e800';
            color: var(--wplm-hauptfarbe);
            font-family: "fontello";
            font-size: 0.8em; }
    .wplm .ivf_wrap .kontakt .ivf-descbox {
      margin-top: 15px;
      font-size: .9em;
      line-height: 1.8em; }
    .wplm .ivf_wrap .kontakt .ivf-ansprechpartner {
      margin-bottom: 50px; }
      .wplm .ivf_wrap .kontakt .ivf-ansprechpartner .anspr_foto {
        width: 75px;
        height: 75px;
        /*float: left;*/
        display: table-cell;
        vertical-align: middle;
        overflow: hidden;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-size: cover;
        background-repeat: no-repeat;
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); }
      .wplm .ivf_wrap .kontakt .ivf-ansprechpartner .anspr_info {
        display: table-cell;
        vertical-align: middle;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        font-size: .95em;
        line-height: 1.2;
        /*float: left;*/
        width: calc(100% - 75px);
        padding-left: 10px; }
        .wplm .ivf_wrap .kontakt .ivf-ansprechpartner .anspr_info span {
          display: block;
          color: #7b7b7b;
          font-style: italic; }

/**
* Außerhalb der Slides
*/
.wplm #tool-output {
  display: block;
  overflow: hidden;
  padding: 15px 25px;
  font-family: var(--wplm-schrift);
  font-size: 18px;
  line-height: 28px; }

/**
* Footer
*/
.wplm .ivf_footer {
  margin-top: 35px;
  -webkit-transition: opacity 400ms ease-in-out;
  -moz-transition: opacity 400ms ease-in-out;
  -ms-transition: opacity 400ms ease-in-out;
  -o-transition: opacity 400ms ease-in-out;
  transition: opacity 400ms ease-in-out; }
  .wplm .ivf_footer.hide {
    pointer-events: none;
    opacity: 0; }
  .wplm .ivf_footer .ivf_progress {
    display: none;
    float: left;
    width: 67%; }
  .wplm .ivf_footer .progress {
    box-sizing: border-box;
    width: 100%;
    height: 6px; }
  .wplm .ivf_footer .progress-wrap {
    display: block;
    background: #FFFFFF;
    margin: 20px 0 0 0;
    padding: 4px;
    position: relative;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    background: white;
    background: -moz-linear-gradient(top, white 0%, #f3f3f3 50%, #ededed 51%, white 100%);
    background: -webkit-linear-gradient(top, white 0%, #f3f3f3 50%, #ededed 51%, white 100%);
    background: linear-gradient(to bottom, white 0%, #f3f3f3 50%, #ededed 51%, white 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=0 ); }
    .wplm .ivf_footer .progress-wrap > span, .wplm .ivf_footer .progress-wrap:after {
      position: absolute;
      left: 0;
      color: var(--wplm-hauptfarbe);
      font-size: 14px; }
    .wplm .ivf_footer .progress-wrap > span {
      display: block;
      bottom: 100%;
      margin-bottom: 2px; }
    .wplm .ivf_footer .progress-wrap .progress-bar {
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
      -webkit-transition: width 400ms ease-in-out;
      -moz-transition: width 400ms ease-in-out;
      -ms-transition: width 400ms ease-in-out;
      -o-transition: width 400ms ease-in-out;
      transition: width 400ms ease-in-out;
      background: var(--wplm-hauptfarbe);
      left: 0;
      position: absolute;
      top: 0;
      width: 0px;
      margin: 1px; }

/**
* Buttons
*/
.wplm .ivf-button-holder.full {
  width: 100%; }
  .wplm .ivf-button-holder.full a {
    font-size: .87em; }
    .wplm .ivf-button-holder.full a.ivf_next, .wplm .ivf-button-holder.full a.cu_ivf_next {
      width: calc(100% - 32px); }
.wplm .ivf-button-holder :is(a, .wplm button) {
  font-size: .83em;
  box-sizing: border-box;
  display: inline-block;
  padding: 9px 18px 9px 30px;
  float: right;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  background: var(--wplm-hauptfarbe);
  color: #ffffff;
  -webkit-border-radius: 0 2px 2px 0;
  border-radius: 0 2px 2px 0; }
  .wplm .ivf-button-holder :is(a, .wplm button) span:before {
    margin-left: 0; }
  .wplm .ivf-button-holder :is(a, .wplm button).single {
    -webkit-border-radius: var(--wplm-input-radius, 2px);
    border-radius: var(--wplm-input-radius, 2px); }
  .wplm .ivf-button-holder :is(a, .wplm button).ivf_prev, .wplm .ivf-button-holder :is(a, .wplm button).cu_ivf_prev {
    width: 32px;
    color: #444;
    background: #e7e7e7;
    padding: 9px 0;
    -webkit-border-radius: 2px 0 0 2px;
    border-radius: 2px 0 0 2px; }
    .wplm .ivf-button-holder :is(a, .wplm button).ivf_prev span:before, .wplm .ivf-button-holder :is(a, .wplm button).cu_ivf_prev span:before {
      margin-right: 0; }
    .wplm .ivf-button-holder :is(a, .wplm button).ivf_prev.hide, .wplm .ivf-button-holder :is(a, .wplm button).cu_ivf_prev.hide {
      display: none;
      pointer-events: none;
      opacity: .5; }
  .wplm .ivf-button-holder :is(a, .wplm button):hover {
    color: #ffffff;
    background: var(--wplm-hauptfarbe-hell, #d4c5ac); }

/**
* Sonstiges
*/
.wplm .info-size {
  font-size: .7em !important;
  line-height: 1.1 !important; }
  .wplm .info-size label input[type="checkbox"] {
    top: 1px !important;
    margin-left: 0; }

.wplm .float-box:after {
  display: block;
  content: ' ';
  clear: both; }

.sendSuccess,
.wplm .hidden {
  display: none; }

.wplm .lb_label {
  font-size: .7em; }

.wplm .hide {
  display: none; }

/**
* Popup
*/












@media (min-width: 480px) {
  .wplm #tool-output {
    padding: 50px 50px 35px 50px; }

  .wplm .ivf_wrap .range-icon {
    display: block; }
  .wplm .ivf_wrap .range-input {
    width: 70%;
    padding-left: 5%; } }
@media (min-width: 600px) {
  .wplm .ivf_wrap .ivf-input-row .ivf-input-cell {
    float: left;
    width: 48.5%;
    margin-bottom: 10px; }
    .wplm .ivf_wrap .ivf-input-row .ivf-input-cell.full {
      float: none;
      width: 100%; }
    .wplm .ivf_wrap .ivf-input-row .ivf-input-cell.small {
      width: 23%; }
    .wplm .ivf_wrap .ivf-input-row .ivf-input-cell.medium {
      width: 74%; }
    .wplm .ivf_wrap .ivf-input-row .ivf-input-cell.xsmall {
      width: 33%; }
    .wplm .ivf_wrap .ivf-input-row .ivf-input-cell.xmedium {
      width: 64%; }
    .wplm .ivf_wrap .ivf-input-row .ivf-input-cell.mright {
      margin-right: 3%; }
    .wplm .ivf_wrap .ivf-input-row .ivf-input-cell.mleft {
      margin-left: 3%; }
  .wplm .ivf_wrap .ivf_mobile_view {
    display: none; }
  .wplm .ivf_wrap .radio-icons {
    display: block;
    display: flex; }
  .wplm .ivf_wrap .range-slider {
    display: block; }
  .wplm .ivf_wrap .range-input {
    width: 25%; }
    .wplm .ivf_wrap .range-input .range-input-label {
      display: block; }
  .wplm .ivf_wrap .kontakt .contact-left {
    float: left;
    width: 53%;
    margin-right: 7%; }
  .wplm .ivf_wrap .kontakt .contact-right {
    float: right;
    width: 40%; }

  .wplm .ivf_footer {
    margin-top: 35px; }
    .wplm .ivf_footer .ivf_progress {
      display: block; }

  .wplm .ivf-button-holder {
    float: right;
    width: 33%; } }
@media (min-width: 768px) {
  .wplm .ivf_wrap .switch {
    width: 49%;
    float: left;
    margin-right: 1%; }
    .wplm .ivf_wrap .switch:nth-child(2n) {
      margin-left: 1%;
      margin-right: 0; } }

/* ==========================================================================
   Ergänzungen zum portierten Stylesheet.

   Hier steht, was im Altsystem von Fremdbibliotheken kam:
   jquery.mb.slider, tingle, animate.css und die Fontello-Icon-Schrift.
   Die Optik bleibt dieselbe, die Abhängigkeiten sind weg.
   ========================================================================== */

/* --- Grundlage ----------------------------------------------------------- */

.wplm {
  font-family: var(--wplm-schrift, Arial, Helvetica, sans-serif);
  /* Hoverfarbe: im SCSS war das mix($main-color, #FFF, 85%). */
  --wplm-hauptfarbe-hell: color-mix(in srgb, var(--wplm-hauptfarbe) 85%, #fff);
}

/* Bewusst KEIN flaechendeckendes border-box: das Altsystem rechnet mit
   content-box und setzt border-box nur dort, wo seine eigenen Regeln es
   verlangen. Wird das global umgestellt, werden alle Bloecke mit Innenabstand
   schmaler — beim Schieberegler etwa wandert „Manuelle Angabe" in zwei Zeilen. */
.wplm-dialog,
.wplm-dialog * {
  box-sizing: border-box;
}

.wplm-hinweis {
  padding: 12px 16px;
  border-left: 4px solid #d63638;
  background: #fcf0f1;
  color: #3c434a;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Schaltflächen statt Verweise ---------------------------------------- */

.wplm .ivf-button-holder button,
.wplm .radio-icons .radio-icon,
.wplm .wplm-bedingungen-oeffnen {
  font: inherit;
  border: 0;
  cursor: pointer;
  appearance: none;
}

.wplm .radio-icons .radio-icon {
  padding: 0;
  background: transparent;
}

/* Der Sechseck-Hintergrund und die Beschriftung sind Pseudo-Elemente ohne
   Lageangabe. Im <div> des Altsystems begann ihr Platz oben links in der Kachel.
   Ein <button> richtet seinen Inhalt aber senkrecht mittig aus — dann rutscht
   das Sechseck nach unten und das Symbol steht darüber statt darin.
   Deshalb wird die Lage hier ausdrücklich festgelegt. */
.wplm .ivf_wrap .radio-icons .radio-icon::before {
  top: 0;
  left: 0;
}

.wplm .ivf_wrap .radio-icons .radio-icon::after {
  left: 0;
}

.wplm .ivf-button-holder button:focus-visible,
.wplm .radio-icons .radio-icon:focus-visible,
.wplm .switch input:focus-visible + .slider {
  outline: 2px solid var(--wplm-hauptfarbe);
  outline-offset: 2px;
}

.wplm .wplm-bedingungen-oeffnen {
  padding: 0;
  background: none;
  color: inherit;
  text-decoration: underline;
}

/* Das Symbol war ein div, jetzt ist es ein span. */
.wplm .ivf_wrap .radio-icon-symbol {
  display: block;
}

/* Für „Doppelhaushälfte" gab es im Altsystem keine Regel — die Kachel blieb
   dort leer. Gemeint ist offensichtlich diese Grafik. */
.wplm .ivf_wrap .radio-icon-symbol.doppelhaus {
  top: 30px;
  left: 7px;
  width: 90px;
  height: 60px;
  background-image: url("../img/doppelhaus.png");
  background-image: image-set(url("../img/doppelhaus.webp") type("image/webp"), url("../img/doppelhaus.png") type("image/png"));
  background-position: 0 0;
  background-size: contain;
}

/* --- Icons: eingebettetes SVG statt Icon-Schrift -------------------------- */

.wplm .wplm-icon {
  display: inline-block;
  vertical-align: -0.125em;
}

/* Die Icon-Schrift des Altsystems gab jedem Zeichen 1em Breite und 0,2em
   Abstand nach rechts. Das SVG übernimmt genau diese Maße — sonst wird der
   Knopf einen Pixel breiter als früher. */
.wplm .ivf-button-holder button .wplm-icon {
  margin-left: 0;
  margin-right: .2em;
}

.wplm .ivf-button-holder button.ivf_prev .wplm-icon,
.wplm .ivf-button-holder button.cu_ivf_prev .wplm-icon {
  margin-left: .2em;
  margin-right: 0;
}

.wplm .info .wplm-icon {
  margin-right: 6px;
}

.wplm .wplm-gruen {
  color: #00aa00;
}

.wplm .wplm-dreht {
  animation: wplm-drehen 1s linear infinite;
}

@keyframes wplm-drehen {
  to {
    transform: rotate(360deg);
  }
}

/* --- Schieberegler statt jquery.mb.slider -------------------------------- */

.wplm input[type="range"].range-slider-bar {
  display: block;
  width: 100%;
  /* Der Balken des Altsystems war ein div ohne Hoehenangabe und damit so hoch
     wie die Zeile: 28px. Genau das muss der Regler auch sein, sonst rutscht
     die Beschriftung darunter nach oben. */
  height: 28px;
  margin: 0;
  padding: 0;
  /* Im Altsystem war der Regler ein div. Hier ist er ein Eingabefeld — und
     damit erwischt ihn jede Theme-Regel der Art
     input { border: 1px solid #ccc }. Das ergibt einen grauen Rahmen um den
     ganzen Regler, den es nie gab. */
  border: 0;
  border-radius: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

.wplm input[type="range"].range-slider-bar::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: #ededed;
}

.wplm input[type="range"].range-slider-bar::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #ededed;
}

.wplm input[type="range"].range-slider-bar::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--wplm-hauptfarbe);
}

.wplm input[type="range"].range-slider-bar::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border: 0;
  border-radius: 50%;
  background: var(--wplm-hauptfarbe);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  appearance: none;
}

.wplm input[type="range"].range-slider-bar::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--wplm-hauptfarbe);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* Der Browser legt beim Anfassen einen dicken Rahmen um das ganze Feld. Das
   Altsystem hatte hier ein div ohne Fokus und damit keinen. Wer mit der
   Tastatur bedient, braucht trotzdem eine Rueckmeldung — die bekommt der
   Griff, nicht das Feld. */
.wplm input[type="range"].range-slider-bar:focus {
  outline: none;
}

.wplm input[type="range"].range-slider-bar:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 3px rgba(0, 0, 0, .18);
}

.wplm input[type="range"].range-slider-bar:focus-visible::-moz-range-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25), 0 0 0 3px rgba(0, 0, 0, .18);
}

/* Solange die Angabe fehlt, ist der Balken rot. Das Pflichtfeld steht rechts
   daneben und wird leicht uebersehen — dann wirkt der Weiter-Knopf tot. */
.wplm .ivf_wrap .range-slider-box._error input[type="range"].range-slider-bar::-webkit-slider-runnable-track {
  background: var(--wplm-input-fehler);
}

.wplm .ivf_wrap .range-slider-box._error input[type="range"].range-slider-bar::-moz-range-track {
  background: var(--wplm-input-fehler);
}

/* --- Fähnchen über dem Griff --------------------------------------------- */

.wplm .ivf_wrap .range-slider-bar-wrap {
  position: relative;
}

/* Der Platz darueber steht schon in .range-slider { padding-top: 29px }. Das
   Faehnchen legt sich hinein, ohne die Hoehe zu veraendern. Es sitzt 34px
   ueber dem Regler: das Altsystem hatte es 29px darueber, der Griff ist hier
   aber 22px hoch statt 20px und reicht damit weiter nach oben — die fuenf
   Pixel gleichen das aus, sonst klebt die Spitze am Griff. */
.wplm .ivf_wrap .range-slider-fahne {
  position: absolute;
  top: -34px;
  transform: translateX(-50%);
  padding: 7px 9px;
  background: var(--wplm-hauptfarbe);
  color: #FFFFFF;
  font: 14px/12px Arial, sans-serif;
  text-shadow: 1px 1px 1px #717171;
  white-space: nowrap;
  border-radius: 4px;
  user-select: none;
  pointer-events: none;
}

.wplm .ivf_wrap .range-slider-fahne:after {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top-color: var(--wplm-hauptfarbe);
  content: " ";
  pointer-events: none;
}

/* --- Dialog statt tingle -------------------------------------------------- */

.wplm-dialog {
  width: min(640px, calc(100vw - 32px));
  max-height: 80vh;
  padding: 0;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  color: #444;
  font-family: var(--wplm-schrift, Arial, Helvetica, sans-serif);
}

.wplm-dialog::backdrop {
  background: rgba(0, 0, 0, .6);
}

.wplm-dialog-inhalt {
  max-height: calc(80vh - 72px);
  padding: 28px;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.5;
}

.wplm-dialog form {
  padding: 12px 20px;
  text-align: right;
  border-top: 1px solid #ededed;
}

.wplm-dialog-schliessen {
  padding: 9px 18px;
  font: inherit;
  color: #444;
  background: #e7e7e7;
  border: 0;
  border-radius: var(--wplm-input-radius, 2px);
  cursor: pointer;
}

/* --- Zustände ------------------------------------------------------------ */

.wplm .ivf_wrap .step.aktiv {
  display: block;
}

.wplm .ivf_wrap .step.inaktiv {
  display: none !important;
}

.wplm .sendProgress,
.wplm .sendSuccess,
.wplm .sendError {
  display: none;
}

.wplm[data-zustand="sendet"] .sendProgress,
.wplm[data-zustand="fertig"] .sendSuccess,
.wplm[data-zustand="fehler"] .sendError {
  display: block;
}

.wplm .sendError {
  color: #b32d2e;
}

.wplm[data-optik~="wplm--ohne-fortschritt"] .ivf_progress {
  display: none !important;
}

.wplm[data-optik~="wplm--ohne-prozent"] .progress-wrap > span {
  display: none;
}

/* --- Bewegung: die sieben Klassen, die tatsächlich benutzt werden --------- */

.wplm .animated {
  animation-duration: .6s;
  animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
  .wplm .animated {
    animation: none !important;
  }

  .wplm .progress-bar {
    transition: none !important;
  }
}

@keyframes wplm-fadeInLeft {
  from { opacity: 0; transform: translate3d(-100%, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes wplm-fadeInRight {
  from { opacity: 0; transform: translate3d(100%, 0, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes wplm-fadeOutLeft {
  from { opacity: 1; }
  to { opacity: 0; transform: translate3d(-100%, 0, 0); }
}

@keyframes wplm-fadeOutRight {
  from { opacity: 1; }
  to { opacity: 0; transform: translate3d(100%, 0, 0); }
}

@keyframes wplm-shake {
  from, to { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}

.wplm .fadeInLeft { animation-name: wplm-fadeInLeft; }
.wplm .fadeInRight { animation-name: wplm-fadeInRight; }
.wplm .fadeOutLeft { animation-name: wplm-fadeOutLeft; }
.wplm .fadeOutRight { animation-name: wplm-fadeOutRight; }
.wplm .shake { animation-name: wplm-shake; }