:root {
  --hintergrund: #ffffff;
  --text: #1c1c1e;
  --leise: #6e6e73;
  --linie: #e5e5ea;
  --flaeche: #f2f2f7;
  --akzent: #0a66d8;
  --akzent-text: #ffffff;
  --warnung: #b3261e;
  --offen: #8a5a00;
  --eingereicht: #0a66d8;
  --bezahlt: #1e7d32;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hintergrund: #000000;
    --text: #f2f2f7;
    --leise: #98989f;
    --linie: #38383a;
    --flaeche: #1c1c1e;
    --akzent: #4c9aff;
    --akzent-text: #000000;
    --warnung: #ff6b60;
    --offen: #ffb340;
    --eingereicht: #4c9aff;
    --bezahlt: #4cd964;
  }
}

[hidden] {
  display: none !important;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--hintergrund);
  color: var(--text);
  font: 17px/1.4 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

h1 {
  font-size: 26px;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

h2 {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--leise);
  margin: 24px 0 8px;
}

.klein {
  color: var(--leise);
  font-size: 15px;
  margin: 0 0 4px;
}

.warnung {
  color: var(--warnung);
  font-weight: 600;
  margin: 12px 0;
}

.wer {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 20px;
}

/* --- Anleitung --- */

.schritte {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.schritte li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: var(--flaeche);
  border-radius: 12px;
  font-size: 19px;
}

.nr {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--akzent-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.symbol {
  color: var(--akzent);
  font-size: 22px;
}

.code {
  font: 700 40px/1.2 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 16px 8px;
  margin: 8px 0 0;
  background: var(--flaeche);
  border-radius: 12px;
  user-select: all;
  -webkit-user-select: all;
}

/* --- Reisen: von–bis · Name · Status --- */

.reisen {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.reisen li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "wann wann status" "name name name";
  column-gap: 12px;
  row-gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linie);
}

.wann {
  grid-area: wann;
  font-variant-numeric: tabular-nums;
  color: var(--leise);
  font-size: 15px;
}

.name {
  grid-area: name;
  overflow-wrap: anywhere;
}

.status {
  grid-area: status;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
}

.status-offen {
  color: var(--offen);
}

.status-eingereicht {
  color: var(--eingereicht);
}

.status-bezahlt {
  color: var(--bezahlt);
}

/* --- Formular und Knoepfe --- */

label {
  display: block;
  margin-top: 8px;
}

input {
  width: 100%;
  min-height: 52px;
  margin: 4px 0 12px;
  padding: 10px 14px;
  font: 600 24px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 12px;
}

input::placeholder {
  color: var(--leise);
  text-transform: none;
}

button {
  display: block;
  width: 100%;
  min-height: 50px;
  margin-top: 16px;
  font: 600 17px -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  color: var(--akzent-text);
  background: var(--akzent);
  border: 0;
  border-radius: 12px;
}

button.zweitrangig {
  color: var(--warnung);
  background: var(--flaeche);
  margin-top: 24px;
}

button:disabled {
  opacity: 0.5;
}