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

/* Formularfelder: Beschriftung und Textfeld untereinander, volle Breite */
form label {
  display: block;
  margin-block: var(--theme-space-xs) var(--theme-space-3xs);
  color: var(--theme-text-secondary);
  font-weight: 600;
}

form input[type="text"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--theme-space-2xs) var(--theme-space-xs);
  color: var(--theme-text-primary);
  background: var(--theme-surface-raised);
  border: 1px solid var(--theme-border-strong);
  border-radius: var(--theme-radius-s);
  font: inherit;
}

form input[type="text"]:focus {
  outline: 2px solid var(--theme-accent-base);
  outline-offset: 1px;
}

form button[type="submit"] {
  margin-block-start: var(--theme-space-s);
  padding: var(--theme-space-2xs) var(--theme-space-m);
  color: var(--theme-accent-contrast);
  background: var(--theme-accent-strong);
  border: 0;
  border-radius: var(--theme-radius-s);
  font: inherit;
  cursor: pointer;
}

form button[type="submit"]:hover {
  background: var(--theme-accent-active);
}

/* Ergebnis: hervorgehoben, Ziffern mit gleicher Breite */
.result {
  margin-block: var(--theme-space-m);
  padding: var(--theme-space-s);
  background: var(--theme-surface-sunken);
  border-inline-start: 4px solid var(--theme-state-success);
  border-radius: var(--theme-radius-s);
  font-size: var(--theme-size-step-1);
  font-variant-numeric: tabular-nums;
}

#total {
  color: var(--theme-text-primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Fehlermeldung: gut sichtbar in der Gefahrenfarbe */
.error,
#error {
  margin-block: var(--theme-space-m);
  padding: var(--theme-space-xs) var(--theme-space-s);
  color: var(--theme-state-danger);
  background: var(--theme-surface-raised);
  border: 1px solid var(--theme-state-danger);
  border-radius: var(--theme-radius-s);
  font-weight: 600;
}

/* Seitenfuß: klein und zurückhaltend */
footer {
  margin-block-start: var(--theme-space-l);
  color: var(--theme-text-muted);
  font-size: var(--theme-size-step--1);
}