/* The app's own styles. theme.css next to this file is the platform's (replaced on a starter update, never edited);
   everything this project adds goes here, built on the theme's custom properties (--theme-*) and utilities. */

/* Das hidden-Attribut muss immer gewinnen, auch gegen andere display-Regeln. */
[hidden] {
  display: none !important;
}

/* Formular: Labels als Block, Eingabefelder über die volle Breite. */
#quote-form label {
  display: block;
  margin: 0 0 var(--theme-space-3xs, 0.25rem);
}

#quote-form input {
  box-sizing: border-box;
  width: 100%;
}

/* Ergebnisbereich: zweispaltiges Grid aus Bezeichnung (dt) und Wert (dd). */
#result dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--theme-space-2xs, 0.5rem) var(--theme-space-m, 1.5rem);
  margin: 0;
}

#result dt {
  color: var(--theme-text-secondary, #3d4652);
}

#result dd {
  margin: 0;
  font-family: var(--theme-font-mono, monospace);
  text-align: right;
}

/* Fehlermeldung in der Gefahrenfarbe. */
#error {
  margin: 0;
  color: var(--theme-state-danger, #b91c1c);
  font-weight: 600;
}

/* Fußzeile: zentriert, kleiner und gedämpft. */
footer {
  margin-top: var(--theme-space-l, 2rem);
  padding: var(--theme-space-s, 1rem);
  text-align: center;
  font-size: var(--theme-size-step--1, 0.833rem);
  color: var(--theme-text-muted, #5c6673);
}