/* Telefonfeld mit Ländervorwahl-Menü (quellen/gemeinsam). Nutzt die Tokens aus style.css bzw. quiz.css. */
.tel-feld{position:relative;display:flex;margin-bottom:var(--s4)}
.tel-feld .tel-cc{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;padding:0 12px 0 14px;cursor:pointer;
  border:1px solid var(--line);border-right:0;border-radius:var(--radius) 0 0 var(--radius);
  background:var(--mp-paper);color:var(--fg-strong);font-family:var(--font-text);font-size:var(--t-body);
  transition:background-color .15s ease
}
.tel-feld .tel-cc:hover,.tel-feld.ist-offen .tel-cc{background:var(--mp-beere-veil)}
.tel-feld .tel-cc:focus{outline:none}
.tel-feld .tel-cc:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.tel-feld .tel-flagge{font-size:18px;line-height:1}
.tel-feld .tel-cc .tel-dial{font-weight:600;font-variant-numeric:tabular-nums}
.tel-feld .tel-pfeil{display:flex;color:var(--fg);transition:transform .15s ease}
.tel-feld .tel-pfeil svg{width:11px;height:8px}
.tel-feld.ist-offen .tel-pfeil{transform:rotate(180deg)}
.qm .lead-form .tel-feld input[type=tel]{flex:1;min-width:0;margin-bottom:0;border-radius:0 var(--radius) var(--radius) 0}
.qm .lead-form .tel-feld input[type=tel]:focus{outline:none;border-color:var(--line)}

.tel-feld .tel-menu{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;overflow:hidden;
  background:var(--mp-paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 14px 36px rgba(20,35,65,.14),0 2px 6px rgba(20,35,65,.06)
}
.tel-feld .tel-menu[hidden]{display:none}
.tel-feld .tel-menu.nach-oben{top:auto;bottom:calc(100% + 6px)}
.tel-feld .tel-suche{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--line);color:var(--fg)}
.tel-feld .tel-suche svg{width:16px;height:16px;flex:0 0 auto}
.qm .lead-form .tel-feld .tel-suche input{
  flex:1;min-width:0;height:46px;margin:0;padding:0;border:0;border-radius:0;outline:none;
  background:transparent;font-family:var(--font-text);font-size:15px;color:var(--fg-strong)
}
.tel-feld .tel-liste{list-style:none;margin:0;padding:6px 0;max-height:264px;overflow-y:auto;overscroll-behavior:contain}
.tel-feld .tel-opt{
  display:flex;align-items:center;gap:12px;margin:0;padding:10px 14px;cursor:pointer;
  font-family:var(--font-text);font-size:15px;line-height:1.3;color:var(--fg-strong)
}
.tel-feld .tel-opt::before{content:none}
.tel-feld .tel-opt.is-aktiv{background:var(--mp-beere-veil)}
.tel-feld .tel-opt[aria-selected=true]{font-weight:600}
.tel-feld .tel-opt[aria-selected=true] .tel-dial{color:var(--accent)}
.tel-feld .tel-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tel-feld .tel-opt .tel-dial{color:var(--fg);font-variant-numeric:tabular-nums}
.tel-feld .tel-trenner{height:1px;margin:6px 14px;padding:0;background:var(--line)}
.tel-feld .tel-trenner::before{content:none}
.tel-feld .tel-leer{padding:14px;font-size:var(--t-sm);color:var(--fg)}

/* =========================================================
   BAC-Selbsteinschätzung im Design des VSL-Quiz (Mrs. Property)
   Quelle: seiten/build/vsl/style.css (Token-Block, .cta, .checklist, .qm-Teil)
   Alles ist unter .qm gekapselt, damit Elementor unberührt bleibt.
   ========================================================= */
:root{
  /* Farben */
  --mp-altrosa:#f8e0d9;      /* Live-Wert der Bestandsseiten */
  --mp-altrosa-soft:#fdf4f1;
  --mp-beere:#a33e6b;
  --mp-beere-dark:#8c3159;
  --mp-beere-veil:rgba(163,62,107,.11);
  --mp-kohle:#373c3c;
  --mp-text:#4b4f58;         /* Live-Fliesstextfarbe */
  --mp-saphir:#34517a;
  --mp-hellgrau:#e3e3e3;
  --mp-senf:#efdd4f;        /* Signature-Marker aus dem CD-Manual */
  --mp-paper:#ffffff;

  --bg:var(--mp-paper);
  --bg-soft:var(--mp-altrosa);
  --fg:var(--mp-text);
  --fg-strong:var(--mp-kohle);
  --accent:var(--mp-beere);
  --line:rgba(55,60,60,.16);
  --line-soft:rgba(55,60,60,.09);

  /* Schrift */
  --font-display:'Tenor Sans','Cormorant Garamond',Georgia,serif;
  --font-text:'Raleway','Helvetica Neue',Arial,sans-serif;
  --t-h1:clamp(30px,5.2vw,52px);
  --t-h2:clamp(25px,3.6vw,38px);
  --t-h3:clamp(20px,2.2vw,26px);
  --t-h4:clamp(18px,1.7vw,20px);
  --t-body-lg:clamp(17px,1.5vw,19px);
  --t-body:16px;
  --t-sm:14px;
  --t-eyebrow:12px;
  --ls-eyebrow:.2em;

  /* Raster */
  --radius:3px;
  --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --container:1180px;
  --prose:760px;
}

.qm,.qm *,.qm *::before,.qm *::after{box-sizing:border-box}
.qm{font-family:var(--font-text);font-size:var(--t-body);line-height:1.62;color:var(--fg);text-align:left}
.qm img{max-width:100%;height:auto;display:block}
.qm a{color:var(--accent)}
.qm h2,.qm h3{font-family:var(--font-display);font-weight:400;color:var(--accent);line-height:1.2;margin:0 0 var(--s4)}
.qm p{margin:0 0 var(--s4)}
.qm input,.qm button{font:inherit;letter-spacing:normal;text-transform:none}
.qm .cta{
  display:inline-block;background:var(--accent);color:var(--mp-paper);
  text-decoration:none;border-radius:var(--radius);
  padding:14px 26px;font-family:var(--font-text);font-weight:600;
  font-size:clamp(17px,1.7vw,20px);line-height:1.3;text-align:center;
  transition:background .15s ease;max-width:100%;
}
.qm .cta:hover,.cta:focus-visible{background:var(--mp-beere-dark)}
.qm .checklist{list-style:none;padding:0;margin:0;display:grid;gap:var(--s4)}
.qm .checklist li{position:relative;padding-left:34px}
.qm .checklist li::before{
  content:"";position:absolute;left:0;top:6px;width:18px;height:10px;
  border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg)
}

.qm{position:fixed;inset:0;z-index:100;display:none}
.qm.is-open{display:block}
.qm-backdrop{position:absolute;inset:0;background:rgba(55,60,60,.55)}
.qm-panel{
  position:absolute;inset:0;background:var(--mp-altrosa-soft);
  overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:var(--s8)
}
.qm-head{
  position:sticky;top:0;z-index:2;background:var(--mp-paper);
  border-bottom:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 16px
}
.qm-head img{width:150px}
.qm-close{
  background:none;border:0;cursor:pointer;font-family:var(--font-text);
  font-size:var(--t-sm);color:var(--fg);padding:8px;display:flex;align-items:center;gap:8px
}
.qm-close:hover{color:var(--accent)}
.qm-close svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none}
.qm-inner{max-width:680px;margin:0 auto;padding:0 20px}
body.qm-locked{overflow:hidden}

.qm .progress{height:3px;background:var(--mp-hellgrau);margin:var(--s6) 0 var(--s5)}
.qm .progress i{display:block;height:100%;background:var(--accent);width:0;transition:width .25s ease}
.qm .qcount{font-size:var(--t-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--fg);margin:0 0 var(--s3)}
.qm .step{display:none}
.qm .step.is-active{display:block}
.qm fieldset{border:0;margin:0;padding:0}
.qm legend{font-family:var(--font-display);font-size:var(--t-h3);color:var(--accent);line-height:1.25;margin-bottom:var(--s4);padding:0}
.qm .hint{font-size:var(--t-sm);font-style:italic;margin:0 0 var(--s5)}
.qm .options{display:grid;gap:10px;margin:0 0 var(--s5)}
.qm .opt{position:relative}
.qm .opt input{position:absolute;opacity:0;width:1px;height:1px}
.qm .opt span{
  display:block;background:var(--mp-paper);border:1px solid var(--line);
  border-radius:var(--radius);padding:14px 16px 14px 46px;cursor:pointer;
  font-size:var(--t-body);transition:border-color .15s ease,background .15s ease
}
.qm .opt span::before{
  content:"";position:absolute;left:16px;top:16px;width:16px;height:16px;
  border:1.5px solid var(--line);background:var(--mp-paper)
}
.qm .opt input[type=radio]+span::before{border-radius:50%}
.qm .opt:hover span{border-color:var(--accent)}
.qm .opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.qm .opt input:checked+span{border-color:var(--accent);background:var(--mp-beere-veil)}
.qm .opt input:checked+span::before{background:var(--accent);border-color:var(--accent)}
.qm .nav{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap}
.qm .back{background:none;border:0;color:var(--fg);font-family:var(--font-text);font-size:var(--t-sm);cursor:pointer;padding:8px 0;text-decoration:underline}
.qm button.cta{border:0;cursor:pointer;font-family:var(--font-text)}
.qm button.cta[disabled]{opacity:.45;cursor:not-allowed}
.qm .result{display:none}
.qm .result.is-active{display:block}
.qm .result h2{font-size:var(--t-h2)}

.qm .lead-form{position:relative;background:var(--mp-paper);border:1px solid var(--line);padding:var(--s5);margin-top:var(--s5)}
.qm .lead-done{border:1px solid var(--accent);background:var(--mp-paper);padding:var(--s5);margin-top:var(--s5)}
.qm .lead-done h3{font-size:var(--t-h3)}
.qm .lead-done p:last-child{margin-bottom:0}
.qm .lead-form label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--fg-strong);margin-bottom:6px}
.qm .lead-form input[type=text],.qm .lead-form input[type=email],.qm .lead-form input[type=tel]{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--font-text);font-size:var(--t-body);margin-bottom:var(--s4);
  background:var(--mp-paper);color:var(--fg-strong)
}
.qm .lead-form input:focus{outline:2px solid var(--accent);outline-offset:1px}
.qm .lead-form .back{display:block;margin:8px auto 0}
.qm .nav[hidden],.qm .lead-step[hidden]{display:none}
.qm .field-error{color:var(--accent);font-size:var(--t-sm);margin:-10px 0 var(--s4);display:none}
.qm .field-error.is-visible{display:block}
.qm .form-error{
  background:var(--mp-beere-veil);border-left:2px solid var(--accent);
  padding:12px 14px;margin:0 0 var(--s4);font-size:var(--t-sm);color:var(--fg-strong)
}
.qm .todo{border:1px dashed var(--line);background:var(--mp-altrosa);padding:var(--s4);font-size:13px;margin-top:var(--s5)}

.qm .fcheck{
  position:absolute;inset:0;z-index:6;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)
}
.qm .fcheck.is-on{display:flex}
.qm .fcheck p{margin:0;font-size:15px;font-weight:600;color:var(--fg-strong)}
.qm .fspin{position:relative;width:46px;height:46px}
.qm .fspin i{
  position:absolute;top:0;left:50%;width:4px;height:12px;margin-left:-2px;
  border-radius:2px;background:var(--accent);transform-origin:2px 23px;
  animation:fspin 1.08s linear infinite
}
.qm .fspin i:nth-child(1){transform:rotate(0deg);animation-delay:-1.08s}
.qm .fspin i:nth-child(2){transform:rotate(30deg);animation-delay:-.99s}
.qm .fspin i:nth-child(3){transform:rotate(60deg);animation-delay:-.90s}
.qm .fspin i:nth-child(4){transform:rotate(90deg);animation-delay:-.81s}
.qm .fspin i:nth-child(5){transform:rotate(120deg);animation-delay:-.72s}
.qm .fspin i:nth-child(6){transform:rotate(150deg);animation-delay:-.63s}
.qm .fspin i:nth-child(7){transform:rotate(180deg);animation-delay:-.54s}
.qm .fspin i:nth-child(8){transform:rotate(210deg);animation-delay:-.45s}
.qm .fspin i:nth-child(9){transform:rotate(240deg);animation-delay:-.36s}
.qm .fspin i:nth-child(10){transform:rotate(270deg);animation-delay:-.27s}
.qm .fspin i:nth-child(11){transform:rotate(300deg);animation-delay:-.18s}
.qm .fspin i:nth-child(12){transform:rotate(330deg);animation-delay:-.09s}
@keyframes fspin{0%{opacity:1}100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.qm .fspin i{animation-duration:2.4s}}

@media (min-width:768px){
  .qm-panel{
    inset:28px;max-width:820px;margin:0 auto;border-radius:var(--radius);
    box-shadow:0 24px 60px -24px rgba(55,60,60,.45)
  }
}
.qm{z-index:2147483000}
.qm .result.is-active{padding-top:var(--s6)}