/* Freie Rechner: Formular links, Ergebnis darunter. Nutzt die Variablen aus core.css. */
.hrt { margin: 1.5rem 0; }
.hrt__form { margin-bottom: 1.25rem; }

/* Eigene Auswahlelemente. Bewusst nicht .hrc-seg und .hrc-q__opt aus core.css:
   diese Klassennamen sind im Projekt mehrfach belegt (Radios, Umschalter, Reiter),
   und die Grundregeln werden von späteren Regeln neutralisiert. Auf den Rechnerseiten
   waren dadurch Rahmen und Hintergrund der Auswahl weg, man sah nur den Text. */
.hrt-fs { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.hrt-fs legend { padding: 0; font-weight: 600; margin-bottom: .4rem; }
.hrt-label { display: block; font-weight: 600; margin-bottom: .4rem; }
.hrt-hint { display: block; font-size: .86rem; color: var(--muted, #6b6b76); margin-top: .3rem; }
.hrt-seg { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.hrt-seg label { flex: 1 1 7rem; margin: 0; min-width: 0; }
.hrt-seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.hrt-seg span {
	display: flex; align-items: center; justify-content: center; text-align: center;
	min-height: 46px; padding: .5rem .9rem;
	border: 1px solid var(--line, #d9d9e3); border-radius: 10px;
	background: var(--surface, #fff); color: inherit;
	cursor: pointer; font-weight: 600; line-height: 1.25;
}
.hrt-seg input:checked + span {
	border-color: var(--brand, #1D4ED8);
	background: var(--brand-soft, rgba(29,78,216,.10));
	color: var(--brand, #1D4ED8);
	box-shadow: inset 0 0 0 1px var(--brand, #1D4ED8);
}
.hrt-seg input:focus-visible + span { outline: 3px solid var(--brand, #1D4ED8); outline-offset: 2px; }
.hrt-seg--wide label { flex: 1 1 6rem; }
@media (hover: hover) { .hrt-seg span:hover { border-color: var(--brand, #1D4ED8); } }

.hrt-plates { display: flex; flex-wrap: wrap; gap: .4rem; }
.hrt-plate { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--line, #d9d9e3); border-radius: 999px; padding: .35rem .7rem; cursor: pointer; font-size: .92rem; }
.hrt-plate input { margin: 0; }
.hrt-plate:has(input:checked) { border-color: var(--brand, #2f6f4f); background: var(--brand-soft, rgba(47,111,79,.09)); font-weight: 600; }
.hrt__out { border-top: 2px solid var(--line, #d9d9e3); padding-top: 1.1rem; }
.hrt__out.is-on { border-top-color: var(--brand, #2f6f4f); }
.hrt-empty { color: var(--muted, #6b6b76); font-style: italic; }
.hrt-big { display: block; margin: 0 0 .9rem; }
.hrt-big__l { display: block; font-size: .9rem; color: var(--muted, #6b6b76); }
.hrt-big__v { display: block; font-size: clamp(1.5rem, 5vw, 2.1rem); line-height: 1.15; font-weight: 700; overflow-wrap: break-word; }
.hrt-big__v small { font-size: .5em; font-weight: 500; color: var(--muted, #6b6b76); margin-left: .35em; }
.hrt-split { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: 1rem; }
.hrt-split .hrt-big { flex: 1 1 8rem; margin-bottom: 0; }
.hrt-split .hrt-big__v { font-size: 1.2rem; }
.hrt-tab { width: 100%; border-collapse: collapse; margin: .8rem 0 1.1rem; font-size: .95rem; }
.hrt-tab th, .hrt-tab td { text-align: left; padding: .5rem .5rem .5rem 0; border-bottom: 1px solid var(--line, #d9d9e3); vertical-align: top; }
.hrt-tab thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #6b6b76); }
.hrt-note { color: var(--muted, #6b6b76); font-size: .88rem; }
.hrt-warn { border-left: 3px solid var(--warn, #b8860b); padding: .55rem .8rem; background: var(--warn-soft, rgba(184,134,11,.08)); border-radius: 0 6px 6px 0; margin: .9rem 0; }
.hrt-formel { margin-top: 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--line, #d9d9e3); border-radius: 10px; background: var(--soft, rgba(0,0,0,.02)); }
.hrt-formel h3 { margin: 0 0 .5rem; font-size: 1.02rem; }
.hrt-formel p { margin: .45rem 0; }
.hrt-formel code { display: block; overflow-x: auto; padding: .4rem .55rem; border-radius: 6px; background: var(--code-bg, rgba(0,0,0,.05)); font-size: .9rem; }
.hrt-privacy { font-size: .85rem; color: var(--muted, #6b6b76); margin-top: 1rem; }
@media (max-width: 520px) {
	.hrt-tab, .hrt-tab tbody, .hrt-tab tr, .hrt-tab th, .hrt-tab td { display: block; }
	.hrt-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.hrt-tab tr { border-bottom: 1px solid var(--line, #d9d9e3); padding: .5rem 0; }
	.hrt-tab th, .hrt-tab td { border: 0; padding: .1rem 0; }
	.hrt-tab tbody th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #6b6b76); }
	.hrt-tab td:empty { display: none; }
}