/* #125 Subnetzrechner — Stil des Werkzeugs, übernommen aus dem PoC
   (work/tools/subnetzrechner-test.html, Abschnitt „Subnetzrechner"), auf den
   Site-Tokens; wird nur auf der Werkzeugseite geladen. Beim Einbau geändert:
   die label-Regel ist auf .subnetzrechner begrenzt, sie färbte sonst jede
   künftige Beschriftung der Seite. */

/* --- Eingabe --- */
.sr-eingabe { 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. */
.sr-feldzeile { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; }
.sr-feld {
/* Kein flex-Wert: Das Feld sitzt in der Spalte von .sr-feldgruppe, dort
   würde eine flex-basis als Höhe wirken. Die Breite steuert die Gruppe. */
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;
}
.sr-feld:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.sr-feld[aria-invalid="true"] { border-color: var(--danger); }
.sr-knopf {
padding: 0.7rem 1.2rem; font: inherit; font-weight: 600;
color: var(--bg); background: var(--link);
border: 1px solid var(--link); border-radius: var(--nz-radius-m);
cursor: pointer; min-height: 3rem;
}
.sr-knopf:hover { filter: brightness(1.08); }
.sr-knopf-neben {
color: var(--link); background: transparent; border-color: var(--border-strong);
font-weight: 400;
}
.sr-knopf-neben:hover { border-color: var(--accent-border); filter: none; }
.sr-beispiele { margin: 0.6rem 0 0; font-size: var(--nz-text-small); color: var(--muted); }
.sr-beispiele button {
font-family: var(--nz-font-mono); font-size: inherit;
color: var(--link); background: none; border: 0; padding: 0 0.15rem;
cursor: pointer; text-decoration: underline;
}
.sr-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);
}
.sr-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);
}
.sr-hinweis p { margin: 0; max-width: none; }
.sr-hinweis p + p { margin-top: 0.5rem; }

/* --- Ergebnis --- */
.sr-ergebnis[hidden] { display: none; }
.sr-kacheln {
list-style: none; margin: 0 0 1.5rem; padding: 0;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem;
}
.sr-kacheln li {
border: 1px solid var(--border); border-radius: var(--nz-radius-m);
padding: 0.6rem 0.7rem; font-size: var(--nz-text-small); line-height: 1.35;
}
.sr-kacheln .sr-kachel-wert {
display: block; font-family: var(--nz-font-mono);
font-size: 1.15rem; font-weight: 600; letter-spacing: -0.02em;
color: var(--link); word-break: break-all;
}
.sr-kacheln .sr-kachel-label {
display: block; font-size: var(--nz-text-label);
letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
@media (max-width: 860px) { .sr-kacheln { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .sr-kacheln { grid-template-columns: 1fr; } }

.sr-werte td:first-child { width: 16rem; color: var(--muted); }
.sr-werte .sr-wert { font-family: var(--nz-font-mono); }
.sr-werte tr:target { background: var(--accent-soft); }

/* --- Binärdarstellung --- */
.sr-binaer {
margin: 0.5rem 0 1rem; padding: 0.9rem 1rem;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--nz-radius-m);
overflow-x: auto;
}
.sr-binaer table { margin: 0; font-size: var(--nz-text-small); }
.sr-binaer th, .sr-binaer td { border: 0; padding: 0.15rem 0.5rem 0.15rem 0; white-space: nowrap; }
.sr-binaer td:first-child { color: var(--muted); padding-right: 1rem; }
.sr-bits { font-family: var(--nz-font-mono); letter-spacing: 0.06em; }
.sr-bit-netz { color: var(--link); font-weight: 600; }
.sr-bit-host { color: var(--muted); }
.sr-legende { margin: 0.6rem 0 0; font-size: var(--nz-text-small); color: var(--muted); }

/* --- Konfigurationszeilen --- */
.sr-konfig-zeile { margin: 0.9rem 0 0; }
.sr-konfig-kopf {
display: flex; justify-content: space-between; align-items: baseline;
gap: 0.6rem; margin-bottom: 0.25rem;
}
.sr-konfig-kopf strong { font-size: var(--nz-text-small); }
.sr-konfig-kopie {
background: none; border: 0; padding: 0; cursor: pointer;
color: var(--link); font: inherit; font-size: var(--nz-text-small);
text-decoration: underline; white-space: nowrap;
}
.sr-konfig-zeile pre {
margin: 0; padding: 0.6rem 0.8rem;
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);
}

/* --- Rechenweg --- */
.sr-rechenweg { margin: 1rem 0 2rem; }
.sr-rechenweg summary {
color: var(--link); cursor: pointer; font-weight: 600;
padding: 0.3rem 0;
}
.sr-rechenweg ol { margin: 0.8rem 0 0; padding-left: 1.3rem; }
.sr-rechenweg li { margin-bottom: 1.1rem; max-width: var(--maxw); }
.sr-rechenweg li:last-child { margin-bottom: 0; }
.sr-rechnung {
margin: 0.5rem 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);
line-height: 1.7; overflow-x: auto; white-space: pre;
}

/* --- Werkzeugbereiche --- */
.sr-werkzeug { margin: 1.5rem 0 2rem; }
.sr-werkzeug .sr-feldzeile { margin-bottom: 0.6rem; }
.sr-werkzeug .sr-feld { font-size: var(--nz-text-body); min-height: 2.75rem; padding: 0.55rem 0.8rem; }
.sr-werkzeug .sr-knopf { min-height: 2.75rem; padding: 0.55rem 1rem; }
.sr-klein { flex: 0 1 14rem; }
.sr-ausgabe:empty { display: none; }
.sr-ja { color: var(--link); font-weight: 600; }
.sr-nein { color: var(--danger); font-weight: 600; }
.sr-scroll { overflow-x: auto; }
.sr-nowrap { white-space: nowrap; }
.subnetzrechner label { display: block; font-size: var(--nz-text-small); color: var(--muted); margin-bottom: 0.25rem; }
/* Spalten-Flex statt Inline-Fluss: sonst bleibt unter dem Eingabefeld
   die Unterlänge der Zeilenbox stehen und der Knopf säße einige Pixel tiefer. */
.sr-feldgruppe { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; margin: 0; }
.sr-feldgruppe .sr-feld { width: 100%; }
.sr-feldgruppe.sr-klein { flex: 0 1 14rem; }