/* ==========================================================================
   STADTSUCHE 2027  (design2025/stadtsuche2027.css) - Feld mit Vorschlagsliste, Logik in stadtsuche2027.js
   Genutzt von /staedteuebersicht/ und den Bundesland-Seiten. Hell und Dunkel (html[data-smd-thema="dunkel"]).
   AENDERUNGEN:
     07.11.2026 Erste Fassung. Handy: Feld und Knopf volle Breite.
   ========================================================================== */
.sm27-stadtsuche { display: flex; gap: 10px; max-width: 560px; margin: 0; }
.sm27-stadtsuche-feld { position: relative; flex: 1 1 auto; min-width: 0; }
.sm27-stadtsuche input { width: 100%; min-width: 0; min-height: 50px; padding: 0 18px 0 46px; border: 1px solid #D5DBE1; border-radius: 999px; font: inherit; font-size: 16px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2366727D' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px center;
	color: #16232B; }
.sm27-stadtsuche input:focus { outline: none; border-color: #C8506E; box-shadow: 0 0 0 4px rgba(200,80,110,.15); }
.sm27-stadtsuche button { flex: none; min-height: 50px; padding: 0 22px; border-radius: 999px; border: 0; background: #C8506E; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.sm27-stadtsuche button:hover { background: #B03F5C; }
.sm27-stadtsuche-liste { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; background: #fff; border: 1px solid #E2E6EA;
	border-radius: 16px; box-shadow: 0 14px 34px rgba(22,35,43,.14); max-height: 320px; overflow-y: auto; }
.sm27-stadtsuche-liste li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; color: #16232B; margin: 0; }
.sm27-stadtsuche-liste li span { color: #66727D; font-size: 13px; white-space: nowrap; }
.sm27-stadtsuche-liste li[aria-selected="true"], .sm27-stadtsuche-liste li:hover { background: #FBEDF1; }
.sm27-stadtsuche-leer { margin: 8px 4px 0; font-size: 14px; color: #66727D; }
.sm27-stadtsuche-box { margin: 0 0 18px; }
.sm27-stadtsuche-box label { display: block; font-weight: 700; margin: 0 0 8px; }
.sm27-stadtsuche { align-items: flex-start; }   /* Knopf bleibt oben, wenn unter dem Feld der Hinweis steht */
@media (max-width: 575.98px) { .sm27-stadtsuche, .smq-stadt .sm27-stadtsuche, .stx-suche .sm27-stadtsuche { flex-direction: column; align-items: stretch; } .sm27-stadtsuche button { width: 100%; } }
html[data-smd-thema="dunkel"] .sm27-stadtsuche input { background-color: #1D2932; border-color: #3A4A56; color: #E7ECF0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2393A1AD' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
html[data-smd-thema="dunkel"] .sm27-stadtsuche input::placeholder { color: #93A1AD; }
html[data-smd-thema="dunkel"] .sm27-stadtsuche-liste { background: #17222A; border-color: #2B3944; box-shadow: 0 14px 34px rgba(0,0,0,.5); }
html[data-smd-thema="dunkel"] .sm27-stadtsuche-liste li { color: #E7ECF0; }
html[data-smd-thema="dunkel"] .sm27-stadtsuche-liste li span, html[data-smd-thema="dunkel"] .sm27-stadtsuche-leer { color: #93A1AD; }
html[data-smd-thema="dunkel"] .sm27-stadtsuche-liste li[aria-selected="true"], html[data-smd-thema="dunkel"] .sm27-stadtsuche-liste li:hover { background: #3A1F29; }