/* text.css — /tools/text (05.10.2026). Baut auf werkzeug.css auf. */
.tx-zahlen {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1rem;
}
.tx-zahl {
  display: flex; flex-direction: column; gap: 0.1rem; padding: 0.8rem 0.9rem; min-width: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow);
}
.tx-zahl b { font: 800 clamp(1.2rem, 2.6vw, 1.55rem) 'Sora', sans-serif; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-zahl span { font-size: 0.74rem; font-weight: 600; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-haupt { background: linear-gradient(145deg, #2288cc, #1a6aaa); border-color: transparent; box-shadow: 0 8px 20px rgba(26, 106, 170, 0.22); }
.tx-haupt b, .tx-haupt span { color: #fff; }
.tx-haupt span { opacity: 0.8; }
@media (max-width: 900px) {
  .tx-zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .tx-zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tx-haupt { grid-column: span 3; flex-direction: row; align-items: baseline; gap: 0.5rem; }
}

.tx-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .tx-raster { grid-template-columns: 1fr; } }

.tx-feldkarte { display: flex; flex-direction: column; gap: 0.8rem; }
.tx-feldkopf { display: flex; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.tx-feld {
  width: 100%; min-height: clamp(18rem, 52vh, 34rem); resize: vertical;
  padding: 1rem 1.1rem; border-radius: 16px; border: 1.5px solid var(--border); background: var(--card2);
  font: 400 1rem/1.65 'Inter', sans-serif; color: var(--text); outline: none;
  transition: border-color 0.16s, background 0.16s, box-shadow 0.3s;
}
.tx-feld:focus { border-color: var(--pri3); background: var(--card); }
.tx-feld::placeholder { color: var(--muted); }
.tx-feld.blitz { animation: txBlitz 0.5s ease; }
@keyframes txBlitz { 30% { box-shadow: 0 0 0 4px rgba(90, 174, 232, 0.25); } }

.tx-seite { display: flex; flex-direction: column; gap: 0.8rem; }
.tx-gruppe .wz-etikett { margin-bottom: 0.6rem; }
.tx-knoepfe { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tx-knoepfe button {
  padding: 0.5rem 0.8rem; border-radius: 10px; border: 1.5px solid var(--border); background: var(--card2);
  font: 600 0.84rem 'Inter', sans-serif; color: var(--text2); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.12s;
}
@media (hover: hover) { .tx-knoepfe button:hover { background: var(--card); color: var(--pri); border-color: var(--border2); } }
.tx-knoepfe button:active { transform: scale(0.95); }
.tx-ersetzen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.tx-ersetzen .wz-eingabe { padding: 0.55rem 0.7rem; font-size: 0.88rem; }
.tx-ersetzen-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-top: 0.7rem; }
.tx-ersetzen-unten .wz-knopf { margin-left: auto; height: 36px; }
.tx-ersetzen-unten .wz-haken { font-size: 0.8rem; }
.tx-treffer { font-size: 0.8rem; font-weight: 600; color: var(--pri); }
.tx-haeufig { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tx-haeufig li { display: inline-flex; gap: 0.35rem; padding: 0.3rem 0.6rem; border-radius: 99px; background: var(--bg2); font-size: 0.82rem; }
.tx-haeufig b { color: var(--pri); }