/* Domain-Seite. Zusatz zu startseite.css, 01.09.2026.
 *
 * Zweiter Anlauf. Im ersten stand die Suche im Hero auf dem Foto, und die
 * zwoelf Endungen standen als volle Tarifkarten darunter. Beides passte
 * nicht: ein Eingabefeld auf einem Foto liest sich schlecht, und eine Endung
 * mit zwei Zahlen braucht keine Karte in Tarifgroesse.
 *
 * Jetzt: die Suche sitzt in einer eigenen Karte, die wie die Tarifkarten der
 * anderen Seiten in das dunkle Band hineinragt, also auf hellem Grund und mit
 * einem richtigen Suchbalken. Die Preise laufen als schmale Chips in zwei
 * gegenlaeufigen Spuren durch, dieselbe Mechanik wie die Bewertungen auf der
 * Startseite (.st-band2 / .st-spur aus startseite.css).
 */

/* ------------------------------------------------------------ Suchkarte */
/* Ragt mit negativem Rand in das Hero-Band, wie .st-tarife auf den anderen
   Seiten. Dadurch bleibt der Uebergang der gleiche, obwohl hier keine
   Kartenreihe steht, sondern ein Feld. */
.dm-suchkarte { margin-top: clamp(-60px, -6vw, -86px); position: relative; z-index: 2; }
.dm-kasten { max-width: 700px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--st-rk);
  padding: clamp(22px, 3vw, 32px); box-shadow: 0 18px 44px -26px rgba(15,32,66,.34); }
.dm-kasten h2 { font-size: clamp(19px, 2.2vw, 24px); text-align: center; margin-bottom: 6px; }
.dm-kasten > p { text-align: center; font-size: 14px; margin-bottom: 20px; }

/* Ein Balken statt zweier getrennter Elemente: Feld und Knopf sitzen in einer
   gemeinsamen gerundeten Flaeche. Zwei nebeneinanderstehende Pillen sahen wie
   zwei Knoepfe aus, von denen einer nicht funktioniert. */
.dm-balken { display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 6px 6px 6px 20px; transition: border-color .16s, box-shadow .16s; }
/* Der Ring sitzt auf der Gruppe und nicht auf dem Feld: sonst laege er
   innerhalb des Balkens und waere zur Haelfte verdeckt. :focus-within faengt
   das ab, egal ob per Maus oder Tastatur hineingegangen wird. */
.dm-balken:focus-within { border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.dm-balken input { flex: 1; min-width: 0; border: 0; background: none; padding: 12px 0;
  font: inherit; font-size: 15.5px; color: var(--text); }
.dm-balken input::placeholder { color: var(--text-faint); }
.dm-balken input:focus { outline: none; }
.dm-balken .st-btn { flex: none; }

/* --------------------------------------------------------- Suchergebnis */
.dm-treffer:empty { display: none; }
.dm-treffer { margin-top: 16px; }
.dm-zeile { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--st-r); padding: 15px 18px; }
.dm-zeile__name { font-size: 15.5px; font-weight: 700; color: var(--text);
  letter-spacing: -.01em; word-break: break-all; }
.dm-zeile__lage { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.dm-zeile__preis { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.dm-zeile__preis span { font-size: 12.5px; font-weight: 400; color: var(--text-muted); }
.dm-fehler { font-size: 13.5px; color: var(--danger); text-align: center; margin: 0; }

/* ------------------------------------------------------ Preise als Chips */
/* Klein und kompakt statt in Tarifgroesse: eine Endung ist ein Name und zwei
   Zahlen, das traegt keine Karte mit Knopf. Zwei Spuren laufen gegeneinander,
   damit das Auge nicht mitgezogen wird und das Band im Stillstand wirkt. */
.dm-chip { display: inline-flex; align-items: baseline; gap: 10px; flex: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 11px 20px; white-space: nowrap; }
.dm-chip__t { font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.dm-chip__p { font-size: 14px; font-weight: 600; color: var(--text); }
/* Der zweite Preis steht gleichberechtigt daneben und nicht kleiner
   weggedrueckt. Bei .shop ist er das Sechsfache des ersten; wer ihn
   uebersieht, kauft an der falschen Zahl entlang. */
.dm-chip__d { font-size: 13px; color: var(--text-muted); }
.dm-chip__d b { color: var(--text-muted); font-weight: 600; }