/* ============================================================================
   RedFlag – Bausteine der Werkzeugseiten (seit 2026-10-26)
   ----------------------------------------------------------------------------
   Ersetzt das alte Terminal-CSS, das jede Werkzeugseite (ip, dns, whois, stack,
   malware, threads) einzeln mitbrachte: 1-px-Rahmen, "//"-Präfixe, dunkle
   Flächen mit fest eingetragenem #101010. Wird nach rf.css eingebunden und
   gilt für alles in <div class="content wz">. Seitenspezifisches bleibt im
   <style> der jeweiligen Seite und nutzt dieselben Farben aus rf.css.
   ============================================================================ */

.wz {
  --gut: #1f7a3a;
  --warn: #b35c00;
  --zart: #d4d4d4;
  width: 100%; max-width: 920px; margin-top: 8px;
  font: 15px/1.6 var(--text); color: var(--tinte);
}

/* ── Eingabe ── */
.wz .search-form { display: flex; gap: 14px; margin-bottom: 40px; flex-wrap: wrap; align-items: stretch; }
.wz .search-form input[type="text"], .wz textarea {
  flex: 1; min-width: 220px;
  font: 400 16px/1.4 var(--mono); color: var(--tinte);
  background: var(--papier); border: 3px solid var(--tinte); border-radius: 0;
  padding: 13px 16px; outline: none; transition: box-shadow .15s;
}
.wz .search-form input[type="text"]:focus, .wz textarea:focus { box-shadow: 6px 6px 0 var(--rot); }
.wz ::placeholder { color: #8a8a8a; }

.wz .search-form button, .wz .knopf-klein {
  font: 700 14px/1 var(--text); letter-spacing: .14em; text-transform: uppercase;
  background: var(--tinte); color: var(--papier);
  border: 3px solid var(--tinte); border-radius: 0; padding: 0 24px; min-height: 52px;
  cursor: pointer; white-space: nowrap;
  box-shadow: 6px 6px 0 var(--rot);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.wz .search-form button:hover, .wz .knopf-klein:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--rot); }
.wz .search-form button:active, .wz .knopf-klein:active { transform: none; box-shadow: 3px 3px 0 var(--rot); }
.wz .search-form button[disabled] { background: var(--grau); border-color: var(--grau); cursor: progress; transform: none; box-shadow: 6px 6px 0 var(--papier-2); }

/* Kleine Knöpfe (kopieren, json) */
.wz .knopf-klein { min-height: 0; padding: 11px 16px; font-size: 12px; box-shadow: 4px 4px 0 var(--rot); }
.wz .knopf-klein:hover { box-shadow: 6px 6px 0 var(--rot); }
.wz .knopf-klein--rand { background: var(--papier); color: var(--tinte); box-shadow: 4px 4px 0 var(--tinte); }
.wz .knopf-klein--rand:hover { box-shadow: 6px 6px 0 var(--tinte); }
.wz .knopf-klein.done { background: var(--gut); border-color: var(--gut); color: var(--papier); }

.wz .opt { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; user-select: none; }
.wz input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--rot); cursor: pointer; }

.wz .hint {
  font-size: 15px; color: var(--grau); max-width: 72ch;
  border-left: 4px solid var(--rot); padding-left: 14px; margin: -18px 0 34px;
}
.wz .hint strong { color: var(--tinte); }

.wz .error-msg {
  background: var(--rot); color: var(--papier); font-weight: 700;
  padding: 14px 18px; margin-bottom: 30px; box-shadow: 6px 6px 0 var(--tinte);
}

/* ── Abschnitte ── */
.wz section { margin-bottom: 44px; }
.wz section > h2, .wz .wz-titel {
  font: 900 clamp(28px, 3.4vw, 40px)/.95 var(--plakat); text-transform: uppercase;
  color: var(--tinte); letter-spacing: .01em;
  border-bottom: 4px solid var(--tinte); padding-bottom: 8px; margin-bottom: 16px;
}
.wz section > h2::first-letter { color: var(--rot); }

/* ── Schlüssel/Wert ── */
.wz dl { display: grid; grid-template-columns: 170px 1fr; gap: 0; }
.wz dt, .wz dd { padding: 9px 0; border-bottom: 2px solid var(--papier-2); }
.wz dt {
  font: 700 12px/1.9 var(--text); letter-spacing: .14em; text-transform: uppercase;
  color: var(--rot); padding-right: 16px;
}
.wz dd { font: 400 14px/1.6 var(--mono); word-break: break-word; }
.wz dd a { color: var(--tinte); text-decoration: none; border-bottom: 2px solid var(--rot); }
.wz dd a:hover { color: var(--rot); }
.wz dd ul { list-style: none; }
.wz .muted { color: var(--grau); }

/* ── Ja/Nein ── */
.wz .flags { display: flex; flex-wrap: wrap; gap: 8px; }
.wz .flags span { margin: 0; }
.wz .yes, .wz .no {
  display: inline-block; font: 700 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 10px; border: 2px solid currentColor;
}
.wz .yes { color: var(--gut); }
.wz .no  { color: var(--grau); text-decoration: line-through; text-decoration-color: var(--rot); text-decoration-thickness: 2px; }

/* ── Tabellen ── */
.wz table { border-collapse: collapse; width: 100%; font: 400 13px/1.5 var(--mono); }
.wz th {
  text-align: left; font: 700 11px/1.3 var(--text); letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinte); padding: 8px 14px 8px 0; border-bottom: 3px solid var(--tinte);
}
.wz td { padding: 8px 14px 8px 0; border-bottom: 2px solid var(--papier-2); vertical-align: top; }
.wz tbody tr:hover td, .wz table.tbl tr:hover td { background: var(--papier-hell); }

/* ── Aufklapper (Rohdaten, Kopfzeilen) ── */
.wz details { border: 3px solid var(--tinte); margin-bottom: 14px; background: var(--papier); }
.wz details > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 12px 16px; font: 700 14px/1.35 var(--mono); color: var(--tinte); word-break: break-all;
}
.wz details > summary::-webkit-details-marker { display: none; }
.wz details > summary::after { content: "+"; font: 900 30px/.8 var(--plakat); color: var(--rot); flex-shrink: 0; transition: transform .2s; }
.wz details[open] > summary { background: var(--tinte); color: var(--papier); }
.wz details[open] > summary::after { transform: rotate(45deg); }
.wz details > summary:hover { color: var(--rot); }
.wz details[open] > summary:hover { color: var(--papier); }
.wz details pre {
  margin: 0; padding: 16px; max-height: 70vh; overflow: auto;
  font: 400 12.5px/1.6 var(--mono); color: var(--tinte); background: var(--papier-hell);
  white-space: pre-wrap; word-break: break-word;
}
.wz details > dl { padding: 4px 16px 12px; }

/* ── Fließtext am Ende ── */
.wz .grenzen { font-size: 16px; max-width: 72ch; }
.wz .grenzen strong { font-weight: 700; }

@media (max-width: 680px) {
  .wz { font-size: 15px; }
  .wz dl { grid-template-columns: 1fr; }
  .wz dt { border-bottom: 0; padding-bottom: 0; }
  .wz dd { padding-top: 2px; }
  .wz .search-form button { width: 100%; }
}