/* #127 Datenraten-Umrechner — Stil des Werkzeugs, übernommen aus dem PoC
   (work/tools/datenraten-umrechner-test.html), auf den Site-Tokens; wird
   nur auf der Werkzeugseite geladen. Beim Einbau geändert: die Hinweis-
   Kästen liegen auf --accent-soft wie bei den Geschwister-Werkzeugen
   (die --warn-*-Tokens des PoC gibt es im Site-Theme nicht), Tabellen-
   Regeln sind auf .dr-werte begrenzt, die label-Regel auf .datenraten. */

/* --- Eingabe --- */
.dr-eingabeform { margin: 1.5rem 0 2rem; }
/* flex-end richtet die Knöpfe an der Unterkante der Eingabefelder aus.
   Bei flex-start läge der Knopf auf Höhe der Feldbeschriftung. */
.dr-feldzeile { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; }
.datenraten label { display: block; font-size: var(--nz-text-small); color: var(--muted); margin-bottom: 0.25rem; }
.dr-feldgruppe { flex: 1 1 20rem; min-width: 0; display: flex; flex-direction: column; margin: 0; }
.dr-feldgruppe.dr-klein { flex: 0 1 14rem; }
/* Drei Felder plus Knopf in einer Zeile: schmalere Grundbreite, sonst
   bricht der Knopf schon bei gewöhnlicher Fensterbreite um. */
#dr-dauer-form .dr-feldgruppe { flex: 1 1 11rem; }
#dr-dauer-form .dr-feldgruppe.dr-klein { flex: 0 1 13rem; }
.dr-feld {
width: 100%; min-width: 0;
padding: 0.7rem 0.9rem;
font-family: var(--nz-font-mono); font-size: 1.05rem;
color: var(--text); background: var(--surface);
border: 1px solid var(--border-strong); border-radius: var(--nz-radius-m);
min-height: 3rem;
}
.dr-feld:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.dr-feld[aria-invalid="true"] { border-color: var(--danger); }
.dr-knopf {
min-height: 3rem; padding: 0.7rem 1.2rem;
background: var(--link); color: var(--bg);
border: 1px solid var(--link); border-radius: var(--nz-radius-m);
font: inherit; font-weight: 600; cursor: pointer;
}
.dr-knopf:hover { filter: brightness(1.08); }
.dr-knopf-neben {
background: transparent; color: var(--link);
border-color: var(--border-strong); font-weight: 400;
}
.dr-knopf-neben:hover { border-color: var(--accent-border); filter: none; }

.dr-beispiele { margin: 0.6rem 0 0; font-size: var(--nz-text-small); color: var(--muted); }
.dr-beispiele button {
background: none; border: 0; padding: 0 0.15rem;
color: var(--link); font: inherit; font-family: var(--nz-font-mono);
cursor: pointer; text-decoration: underline;
}

.dr-fehler {
margin: 0.8rem 0 0; padding: 0.7rem 0.9rem;
color: var(--danger); background: var(--surface);
border: 1px solid var(--danger); border-radius: var(--nz-radius-m);
font-size: var(--nz-text-small);
}
.dr-hinweis {
margin: 1rem 0; padding: 0.75rem 1rem;
background: var(--accent-soft); border-left: 3px solid var(--link);
border-radius: 0 var(--nz-radius-s) var(--nz-radius-s) 0;
font-size: var(--nz-text-small);
}

/* --- Kacheln --- */
.dr-ergebnis[hidden] { display: none; }
.dr-kacheln {
display: grid; gap: 0.7rem; margin: 1.1rem 0 1.4rem;
grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.dr-kachel {
padding: 0.8rem 0.9rem;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--nz-radius-m);
}
.dr-kachel .dr-wert {
display: block; font-family: var(--nz-font-mono);
font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em;
color: var(--link); overflow-wrap: anywhere;
}
.dr-kachel .dr-name {
display: block; margin-top: 0.15rem;
font-size: var(--nz-text-label);
letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}

/* --- Ergebnis-Tabelle --- */
.dr-scroll { overflow-x: auto; }
.dr-werte td:first-child { width: 11rem; color: var(--muted); }
.dr-werte .dr-zahl { font-family: var(--nz-font-mono); text-align: right; width: 16rem; }
.dr-werte tr:target { background: var(--accent-soft); }
.dr-gruppe td {
background: var(--surface); font-size: var(--nz-text-small);
font-weight: 600; color: var(--text);
}
.dr-nowrap { white-space: nowrap; }

/* --- Rechenweg (aufklappbar) --- */
.dr-aufklapp { margin: 1rem 0 2rem; }
.dr-aufklapp summary {
color: var(--link); cursor: pointer; font-weight: 600; padding: 0.3rem 0;
}
.dr-aufklapp pre {
margin: 0.6rem 0 0; padding: 0.7rem 0.9rem;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--nz-radius-m);
font-family: var(--nz-font-mono); font-size: var(--nz-text-small);
overflow-x: auto; white-space: pre; color: var(--text);
}

/* --- Werkzeugbereiche --- */
.dr-werkzeug { margin: 1.5rem 0 2rem; }
.dr-werkzeug .dr-feldzeile { margin-bottom: 0.6rem; }
.dr-ausgabe { margin-top: 1rem; }
.dr-ausgabe:empty { display: none; }