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

/* ------------------------------------------------- Vollstaendige Preisliste */
/* 12.09.2026. Alle Endungen als Tabelle nach dem Vorbild skrime.eu/reselling:
   fuenf Spalten, zehn Zeilen pro Seite, darueber die Suche. Sortiert wird
   ueber die Spaltenkoepfe. Die
   Flaeche ist eine Karte wie die Suchkarte, damit Filter, Tabelle und
   Seitenfuss als ein Werkzeug zusammenstehen. */
.dm-liste { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--st-rk); padding: clamp(16px, 2.4vw, 26px);
  box-shadow: 0 18px 44px -30px rgba(15,32,66,.30); scroll-margin-top: 96px; }

.dm-filter { margin-bottom: 16px; }
.dm-filter__suche { position: relative; }
.dm-filter__suche svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px;
  transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
.dm-filter__suche input { width: 100%; height: 46px; padding: 0 14px 0 42px;
  background: var(--bg); border: 1px solid var(--border-strong); border-radius: 12px;
  color: var(--text); font: inherit; font-size: 15px; }
.dm-filter__suche input::placeholder { color: var(--text-muted); }
.dm-filter__suche input:focus-visible, .dm-sort:focus-visible, .dm-seite:focus-visible {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 24%, transparent); }


/* Tabelle. Zahlen rechtsbuendig mit gleich breiten Ziffern, damit Komma
   unter Komma steht und Preise sich ueberfliegen lassen. */
.dm-tabelle { border: 1px solid var(--border); border-radius: var(--st-r); overflow-x: auto; }
.dm-tabelle table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dm-tabelle table[hidden], .dm-nichts[hidden] { display: none; }
.dm-tabelle thead th { position: sticky; top: 0; background: var(--bg); padding: 0;
  border-bottom: 1px solid var(--border); }
/* Der ganze Kopf ist der Knopf, nicht nur das Wort: die Zelle ist die
   Trefferflaeche. */
.dm-sort { display: flex; align-items: center; justify-content: flex-end; gap: 6px; width: 100%;
  padding: 13px 18px; background: none; border: 0; border-radius: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap;
  transition: color .15s ease; }
.dm-tabelle thead th:first-child .dm-sort { justify-content: flex-start; }
.dm-sort:hover { color: var(--text); }
.dm-sort__i { width: 9px; height: 13px; flex: none; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dm-sort__auf, .dm-sort__ab { opacity: .4; transition: opacity .15s ease; }
th[aria-sort="ascending"] .dm-sort, th[aria-sort="descending"] .dm-sort { color: var(--primary); }
th[aria-sort="ascending"] .dm-sort__auf, th[aria-sort="descending"] .dm-sort__ab { opacity: 1; }
th[aria-sort="ascending"] .dm-sort__ab, th[aria-sort="descending"] .dm-sort__auf { opacity: .15; }
.dm-tabelle thead th:first-child, .dm-tabelle tbody th { text-align: left; }
.dm-tabelle tbody th, .dm-tabelle tbody td { padding: 13px 18px; border-bottom: 1px solid var(--border);
  white-space: nowrap; }
.dm-tabelle tbody tr:last-child th, .dm-tabelle tbody tr:last-child td { border-bottom: 0; }
.dm-tabelle tbody th { font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.dm-tabelle tbody td { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.dm-tabelle tbody tr { transition: background-color .12s ease; }
@media (hover: hover) { .dm-tabelle tbody tr:hover { background: color-mix(in srgb, var(--primary) 6%, transparent); } }

.dm-aktion { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em; vertical-align: 1px;
  background: var(--success-soft, rgba(22,163,74,.12)); color: var(--success, #16A34A); }
.dm-tabelle td.dm-hoch { color: var(--warning, #D97706); font-weight: 600; }
.dm-pfeil { margin-right: 4px; font-size: 12px; }
.dm-leer { color: var(--text-muted); }

.dm-nichts { padding: 40px 20px; text-align: center; }
.dm-nichts p { margin-bottom: 14px; color: var(--text); font-size: 15px; }

.dm-fuss { display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin-top: 16px; }
.dm-stand { font-size: 13.5px; }
.dm-seiten { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-seiten:empty { display: none; }
.dm-seite { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 10px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--text);
  font: inherit; font-size: 14px; font-variant-numeric: tabular-nums;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.dm-seite:hover:not([disabled]):not([aria-current]) { border-color: var(--primary); color: var(--primary); }
.dm-seite[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #08121F; font-weight: 700; }
[data-theme="light"] .dm-seite[aria-current="page"] { color: #fff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .dm-seite[aria-current="page"] { color: #fff; }
}
.dm-seite[disabled] { opacity: .4; cursor: default; }
.dm-seite--pfeil { font-size: 18px; line-height: 1; }
.dm-seite--luecke { display: inline-flex; align-items: center; justify-content: center;
  border-color: transparent; cursor: default; color: var(--text-muted); }

/* Schmal: jede Endung wird eine kleine Karte mit beschrifteten Zeilen. Eine
   Tabelle mit fuenf Preisspalten laesst sich auf 400 Pixeln nur quer
   scrollen, und dann sieht man die Endung nicht mehr neben ihrem Preis. */
@media (max-width: 680px) {
  .dm-tabelle { border: 0; border-radius: 0; overflow: visible; }
  /* Die Kopfzeile bleibt als Knopfreihe ueber den Karten stehen, sonst
     liesse sich auf dem Handy nicht sortieren. */
  .dm-tabelle table, .dm-tabelle thead, .dm-tabelle tbody, .dm-tabelle tr,
  .dm-tabelle tbody th, .dm-tabelle tbody td { display: block; }
  .dm-tabelle thead { margin-bottom: 12px; }
  .dm-tabelle thead tr { display: flex; flex-wrap: wrap; gap: 6px; }
  .dm-tabelle thead th { position: static; background: none; border: 0; }
  .dm-sort, .dm-tabelle thead th:first-child .dm-sort { width: auto; min-height: 36px; padding: 0 12px;
    justify-content: center; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 13px; }
  th[aria-sort="ascending"] .dm-sort, th[aria-sort="descending"] .dm-sort { border-color: var(--primary); }
  .dm-tabelle tbody tr { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 10px;
    padding: 6px 0; background: var(--bg); }
  .dm-tabelle tbody tr:hover { background: var(--bg); }
  .dm-tabelle tbody th { padding: 8px 16px 6px; font-size: 16px; border-bottom: 1px solid var(--border); }
  /* Beschriftung links, Wert rechts. Der Pfeil gehoert an den Preis: mit
     space-between stuende er als eigenes Element mitten in der Zeile. */
  .dm-tabelle tbody td { display: flex; justify-content: flex-end; align-items: baseline; gap: 4px;
    padding: 7px 16px; border-bottom: 0; }
  .dm-tabelle tbody td::before { content: attr(data-l); margin-right: auto; padding-right: 12px;
    color: var(--text-muted); font-weight: 400; }
  .dm-tabelle tbody tr:last-child th { border-bottom: 1px solid var(--border); }
  .dm-fuss { flex-direction: column; align-items: stretch; }
  /* Sieben Knoepfe muessen auf 360 Pixel in eine Zeile passen. */
  .dm-seiten { justify-content: center; flex-wrap: nowrap; gap: 4px; }
  .dm-seite { min-width: 38px; height: 40px; padding: 0 6px; }
  .dm-seite--luecke { min-width: 22px; padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-sort, .dm-sort__auf, .dm-sort__ab, .dm-seite, .dm-tabelle tbody tr { transition: none; }
}