/* 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)}