/* whois.css — Ergänzungen für /whois-schutz
 *
 * Nutzt tld-card wie /domains und die ls-Bausteine wie die übrigen
 * Leistungsseiten. Hier stehen nur die Abzeichen und die
 * Suchbox — alles andere kommt aus leistung.css und tokens.css.
 */

/* ── Abzeichen ──────────────────────────────────────────────────
   Die Farbe sagt sofort, woran man ist. Grün nur dort, wo es
   wirklich ohne Aufpreis geht — sonst wäre es wieder eine Zusage,
   die nicht stimmt. */
.ws-badge {
  display: inline-flex; align-items: center;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  padding: .24rem .55rem; border-radius: 999px; white-space: nowrap;
}
.ws-ja     { background: var(--ok-bg);   color: var(--ok-text);
             border: 1px solid var(--ok-border); }
.ws-kosten { background: var(--info-bg); color: var(--info-text);
             border: 1px solid var(--info-border); }
.ws-nein   { background: var(--err-bg);  color: var(--err-text);
             border: 1px solid var(--err-border); }
.ws-de     { background: var(--warn-bg); color: var(--warn-text);
             border: 1px solid var(--warn-border); }
.ws-offen  { background: var(--tile-bg); color: var(--ink-muted);
             border: 1px solid var(--line); }

/* ── Gruppen ────────────────────────────────────────────────── */
.ws-gruppe { margin-bottom: 2.5rem; }
.ws-gruppe:last-child { margin-bottom: 0; }
.ws-gruppe-titel {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  letter-spacing: -.015em; color: var(--ink); margin: 0 0 .5rem;
}
.ws-anzahl {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
  padding: .18rem .5rem; border-radius: 999px;
  background: var(--tile-bg); color: var(--ink-muted);
}
.ws-gruppe-text {
  font-size: .89rem; line-height: 1.7; color: var(--ink-muted);
  margin: 0 0 1.1rem; max-width: 62ch;
}
.ws-gruppe-text b { color: var(--ink); }

.ws-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .8rem;
}
.ws-card { display: flex; flex-direction: column; gap: .5rem; }
.ws-card .tld-card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
}
.ws-grund {
  font-size: .78rem; line-height: 1.55; color: var(--ink-muted);
  margin: 0; padding-top: .35rem; border-top: 1px solid var(--line);
}

/* ── Die Suche ──────────────────────────────────────────────── */
.ws-suche {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2xl); padding: 1.4rem 1.5rem;
}
.ws-suche > label {
  display: block; font-size: .84rem; font-weight: 600;
  color: var(--ink); margin-bottom: .55rem;
}
.ws-suche-zeile { display: flex; gap: .6rem; flex-wrap: wrap; }
.ws-suche-zeile input {
  flex: 1; min-width: 200px;
  font-family: inherit; font-size: .95rem; padding: .68rem .85rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink);
}
.ws-suche-zeile input:focus { outline: none; border-color: var(--ink); }

.ws-ergebnis:empty { display: none; }
.ws-ergebnis { margin-top: 1.1rem; }
.ws-erg-leer { font-size: .87rem; color: var(--ink-muted); margin: 0; }
.ws-erg {
  border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 1rem 1.15rem; background: var(--surface-alt);
}
.ws-erg-kopf { display: flex; align-items: center; gap: .7rem;
  margin-bottom: .6rem; }
.ws-erg-tld {
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700;
  color: var(--ink);
}
.ws-erg-text { font-size: .88rem; line-height: 1.65; color: var(--ink-muted);
  margin: 0; max-width: 62ch; }
.ws-erg-preis {
  font-size: .88rem; font-weight: 600; color: var(--ink);
  margin: .5rem 0 0; font-variant-numeric: tabular-nums;
}

/* ── Hinweise ───────────────────────────────────────────────── */
.ws-hinweis {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-2xl); padding: 1.4rem 1.5rem;
}
.ws-hinweis p { font-size: .91rem; line-height: 1.75; color: var(--ink-muted);
  margin: 0 0 .9rem; max-width: 64ch; }
.ws-hinweis p:last-child { margin-bottom: 0; }
.ws-hinweis-klein {
  font-size: .84rem !important; padding-top: .9rem;
  border-top: 1px solid var(--line); color: var(--muted) !important;
}

.ws-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.ws-liste li {
  position: relative; padding-left: 1.3rem;
  font-size: .91rem; line-height: 1.7; color: var(--ink-muted); max-width: 64ch;
}
.ws-liste li::before {
  content: ''; position: absolute; left: 0; top: .72em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong);
}

.ws-cta { text-align: left; }

@media (max-width: 640px) {
  .ws-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ws-suche { padding: 1.1rem 1.2rem; }
  .ws-suche-zeile .ls-btn-light { width: 100%; }
}


/* ── Kachel-Grundregeln ──────────────────────────────────────────

   .tld-card und Geschwister stehen in views/domains.html — also
   nur dort. Damit die Kacheln hier gleich aussehen, die noetigen
   Regeln hier nochmal, aber mit Tokens statt fester Werte.

   Sauberer waere, sie ebenfalls nach leistung.css zu ziehen. Das
   waere aber ein Eingriff in /domains, und der gehoert in ein
   eigenes Paket — nicht nebenbei in eines ueber WHOIS. */
.ws-grid.tld-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .8rem;
}
.ws-card.tld-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: 1rem 1.1rem;
  cursor: default;
}
.ws-card .tld-card-ext {
  font-family: var(--font-mono); font-size: .98rem; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em;
}
.ws-card .tld-card-price {
  font-size: .88rem; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ws-card .tld-card-period {
  font-size: .74rem; font-weight: 400; color: var(--muted); margin-left: .15rem;
}