/* Laendervorwahl+Telefonnummer-Paar (pst_render_telefon_feld) — von allen
 * Formular-Widgets gemeinsam genutzt (Kontakt-Popup, Bewerbungsformular). */

.pst-telrow { display:flex; gap:8px; }

.pst-telrow__dial {
	flex:0 0 auto; width:112px; /* M9b: Grid 112px/1fr */ font-family:inherit; font-size:15px; color:var(--ink-900, #262626);
	background:var(--white, #fff); border:1px solid var(--border-control, #8A857B); border-radius:var(--pst-radius-sm, 4px);
	padding:13px 8px; appearance:none; cursor:pointer; transition:border-color .15s ease, background-color .15s ease;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2355524B' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 8px center; padding-right:22px;
}
.pst-telrow__dial:focus { outline:none; border-color:var(--focus-border, #93783D); background-color:#fff; box-shadow:var(--focus-ring, 0 0 0 3px rgba(147,120,61,.22)); }

.pst-telrow__num {
	flex:1 1 auto; min-width:0; font-family:inherit; font-size:17px; color:var(--ink-900, #262626);
	background:var(--white, #fff); border:1px solid var(--border-control, #8A857B); border-radius:var(--pst-radius-sm, 4px);
	padding:14px 16px; transition:border-color .15s ease, background-color .15s ease;
}
.pst-telrow__num::placeholder { color:var(--text-muted); }
.pst-telrow__num:focus { outline:none; border-color:var(--focus-border, #93783D); background-color:#fff; box-shadow:var(--focus-ring, 0 0 0 3px rgba(147,120,61,.22)); }

@media (max-width:360px) {
	.pst-telrow__dial { width:82px; }
}

/* ── A5 (Joe 02.08): Vorwahl-Dropdown mit einheitlichen 4x3-SVG-Flaggen ──
 * telefon-vorwahl.js baut .pst-teldial VOR das native Select (das nur noch
 * den Formularwert traegt). Alle Flaggen gleich gross, CH bewusst breit. */
.pst-telrow { position:relative; }
.pst-telrow__dial--hidden { display:none; }

.pst-teldial { position:relative; flex:0 0 auto; width:112px; }
.pst-teldial__btn {
	display:flex; align-items:center; gap:8px; width:100%;
	font-family:inherit; font-size:15px; color:var(--ink-900, #262626);
	background:var(--white, #fff); border:1px solid var(--border-control, #8A857B); border-radius:var(--pst-radius-sm, 4px);
	padding:13px 8px; padding-right:22px; cursor:pointer; transition:border-color .15s ease, background-color .15s ease;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2355524B' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat; background-position:right 8px center;
}
.pst-teldial__btn:focus { outline:none; border-color:var(--focus-border, #93783D); background-color:#fff; box-shadow:var(--focus-ring, 0 0 0 3px rgba(147,120,61,.22)); }
.pst-teldial__btncode { font-weight:600; }

.pst-flag {
	flex:none; width:21px; height:15px;
	background-size:cover; background-position:center;
	box-shadow:inset 0 0 0 1px rgba(38,38,38,.12);
}

.pst-teldial__list {
	position:absolute; top:calc(100% + 4px); left:0; z-index:60;
	min-width:264px; max-height:288px; overflow-y:auto;
	margin:0; padding:4px; list-style:none;
	background:#fff; border:1px solid var(--border-control, #8A857B); border-radius:var(--pst-radius-sm, 4px);
	box-shadow:0 12px 32px rgba(38,38,38,.16);
}
.pst-teldial__item {
	display:flex; align-items:center; gap:10px;
	padding:9px 10px; font-size:15px; color:var(--ink-900, #262626); cursor:pointer;
}
.pst-teldial__item:hover { background:var(--sand-100, #F5F0E6); }
.pst-teldial__item:focus { outline:none; background:var(--sand-100, #F5F0E6); box-shadow:inset 0 0 0 2px var(--gold-500, #CBAE6B); }
.pst-teldial__item[aria-selected="true"] { background:var(--sand-100, #F5F0E6); }
.pst-teldial__item[aria-selected="true"] .pst-teldial__code { color:var(--gold-800, #7D6529); }
.pst-teldial__code { font-weight:700; min-width:46px; font-variant-numeric:tabular-nums; }
.pst-teldial__label { color:var(--ink-600, #55524B); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

@media (max-width:360px) {
	.pst-teldial { width:96px; }
	.pst-teldial__list { min-width:236px; }
}

/* B-07: JS-Hinweiszeile unter dem Feldpaar — sanfter Hinweis (unbekannte
 * Vorwahl) in ink-600, Laengen-Validierung im M9-Fehlerstil (is-error). */
.pst-telrow__hint { margin:6px 0 0; font-size:14px; line-height:1.4; color:var(--ink-600, #55524B); }
.pst-telrow__hint.is-error { color:var(--error, #A8442F); }