/* Bedienung und Ergebnisdarstellung des Rechners. */
.mg-eingabe { display: flex; gap: .5rem; align-items: stretch; }
.mg-eingabe input { min-width: 0; flex: 1; appearance: textfield; -moz-appearance: textfield; }
.mg-eingabe input::-webkit-inner-spin-button, .mg-eingabe input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.mg-eingabe button { flex: 0 0 2.75rem; min-height: 2.75rem; border: 1px solid var(--glasrand); border-radius: var(--radius); background: var(--glas); color: var(--text); font: 1.35rem var(--zahl); cursor: pointer; }
.mg-eingabe button:hover { border-color: var(--cyan); color: var(--cyan); }
.mg-eingabe button:focus-visible, .rechner-kurz:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
#vorlage-suche-bereich[hidden] { display: none; }
#vorlage-treffer { min-height: 1.5em; margin: .4rem 0 .75rem; }
.rechner-kurz { display: none; }
#rechner-ergebnis { scroll-margin-top: calc(var(--rechner-kopf, 4rem) + 1rem); }
#skalendetail:not(:empty) { border-top: 1px solid var(--glasrand); margin-top: .75rem; padding-top: .875rem; text-align: left; }
#skalendetail svg { display: block; width: 100%; max-width: 40rem; height: auto; margin: 0 auto; font-family: var(--zahl); }
.skalen-titel { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin: 0 0 .4rem; font-size: .875rem; color: var(--text); }
.skalen-titel span, .skalen-hilfe { color: var(--fein); }
.skalen-hilfe { margin: .25rem 0 0; font-size: .75rem; line-height: 1.5; }
@media (max-width: 48rem) {
  .rechner-kurz { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; position: sticky; top: calc(var(--rechner-kopf, 4rem) + .375rem); z-index: 35; padding: .75rem 1rem; margin: 0 0 1rem; background: var(--nacht, #050a11); border: 1px solid var(--cyan); border-radius: var(--radius); box-shadow: 0 .5rem 1.5rem #0006; color: var(--text); text-decoration: none; }
  .rechner-kurz > span { font-size: .75rem; align-self: center; }
  .rechner-kurz strong { color: var(--cyan); font-family: var(--zahl); font-size: 1rem; text-align: right; }
  .rechner-kurz small { grid-column: 1 / -1; font-size: .75rem; color: var(--fein); }
  .rechner-kurz.problem { border-color: var(--fein); }
  .rechner-kurz.problem strong { color: var(--text); }
  #skalendetail svg { margin-top: .25rem; }
}
/* Direkte Suchvorschläge statt einer zweiten, getrennten Auswahlliste. */
#vorlage-vorschlaege { display:grid; gap:.375rem; margin-top:.5rem; max-height:18rem; overflow-y:auto; padding:.25rem; border:1px solid var(--glasrand); border-radius:var(--radius); background:var(--nacht); }
#vorlage-vorschlaege[hidden], #vorlage-groessen-bereich[hidden] { display:none; }
.vorlage-vorschlag { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:3rem; width:100%; padding:.625rem .75rem; text-align:left; color:var(--text); background:var(--glas); border:1px solid transparent; border-radius:var(--radius); cursor:pointer; font:inherit; }
.vorlage-vorschlag span { min-width:0; overflow-wrap:anywhere; }
.vorlage-vorschlag strong { flex-shrink:0; color:var(--cyan); font-family:var(--zahl); font-size:.875rem; }
.vorlage-vorschlag:hover, .vorlage-vorschlag[aria-selected="true"] { border-color:var(--cyan); background:var(--tiefe); }
.vorlage-vorschlag:focus-visible { outline:2px solid var(--cyan); outline-offset:1px; }
#vorlage-groessen-bereich { margin:.75rem 0; }
#vorlage-groessen { margin-top:.375rem; }
#vorlage-auswahl { margin:.5rem 0; color:var(--cyan); font-size:.875rem; }
#rechner-ergebnis > .kennwert-reihe { grid-template-columns:repeat(2,minmax(0,1fr)); }