/* Übersetzer: ergänzt digital.css */
.werkzeug{display:flex;flex-direction:column;gap:16px;padding:24px;background:var(--raised);border-left:24px solid var(--turquoise)}
.richtung{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.richtung .spr{font-size:1.5rem;font-weight:800;line-height:1.2}
.richtung .spr:last-child{text-align:right}
.tauschen{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:0 18px;font:inherit;font-weight:800;border:2px solid var(--ink);border-radius:2px;background:var(--surface);color:var(--ink);cursor:pointer}
.tauschen:hover{background:var(--ink);color:#fff}
.tauschen svg{width:24px;height:24px}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.feld{display:flex;flex-direction:column;gap:8px;min-width:0}
.feld label,.feld .etikett{font-weight:800;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.feld textarea,.feld output{display:block;width:100%;min-height:12em;padding:14px 16px;font:inherit;font-size:1.1rem;line-height:1.5;color:var(--ink);background:var(--surface);border:2px solid var(--ink);border-radius:2px;white-space:pre-wrap;overflow-wrap:anywhere}
.feld textarea{resize:vertical}
.feld output{min-height:12em}
.feld output:empty::before{content:attr(data-leer);color:#8a8a8a}
.zeile{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.zeile .zaehler{margin-left:auto;font-size:.85rem;color:var(--muted)}
.klein{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;font:inherit;font-weight:600;font-size:.95rem;border:2px solid var(--ink);border-radius:2px;background:var(--surface);color:var(--ink);cursor:pointer}
.klein:hover{background:var(--ink);color:#fff}
.klein[aria-pressed="true"]{background:var(--ink);color:#fff}
.klein:disabled,.knopf:disabled{opacity:.45;cursor:not-allowed}
.haupt{min-height:56px;font-size:1.1rem}
.status{min-height:1.6em;font-size:.95rem;color:var(--muted)}
.laden{display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--surface);border:2px solid var(--ink)}
.laden[hidden]{display:none}
.balken{height:12px;background:#e4e1db}
.balken div{height:100%;width:0;background:var(--orange);transition:width .2s}
@media (max-width:720px){
  .felder{grid-template-columns:1fr}
  .werkzeug{padding:20px 16px;border-left-width:12px}
  .richtung .spr{font-size:1.2rem}
  .feld textarea,.feld output{min-height:8em}
}
@media (prefers-reduced-motion:reduce){.balken div{transition:none}}