:root {
  --petrol: #28b8c8;
  --grund: #060606;
  --flaeche: #101315;
  --linie: #22292c;
  --text: #f2f4f5;
  --gedimmt: #9aa5a9;
  --warnung: #e8a33d;
  --fehler: #ef6b63;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text); font: 16px/1.5 "Barlow", system-ui, sans-serif; }
main { max-width: 40rem; margin: 0 auto; padding: 1rem; }
h1, h2 { font-family: "Bebas Neue", "Barlow", sans-serif; font-weight: 400; letter-spacing: 0.03em; margin: 1.5rem 0 0.75rem; }
h1 { font-size: 2.4rem; color: var(--petrol); }
h2 { font-size: 1.6rem; }
a { color: var(--petrol); }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 0.75rem; padding: 1rem; margin-bottom: 0.75rem; }
.karte h2 { margin-top: 0; }
.karte-link { display: block; color: inherit; text-decoration: none; }
.hinweis { border-left: 4px solid var(--warnung); }
.gedimmt { color: var(--gedimmt); }
.fehler { color: var(--fehler); }
button, input, select { font: inherit; }
button { background: var(--petrol); color: var(--grund); border: 0; border-radius: 0.5rem; padding: 0.6rem 1rem; font-weight: 600; cursor: pointer; }
button.zweitrangig { background: transparent; color: var(--petrol); border: 1px solid var(--petrol); }
label { display: block; color: var(--gedimmt); font-size: 0.9rem; }
input, select { display: block; width: 100%; background: var(--grund); color: var(--text); border: 1px solid var(--linie); border-radius: 0.5rem; padding: 0.6rem; margin: 0.25rem 0 0.75rem; }
.qr { background: #fff; padding: 0.75rem; border-radius: 0.5rem; width: max-content; max-width: 100%; }
.qr svg { display: block; width: 220px; height: 220px; }
.link { word-break: break-all; font-size: 0.85rem; }
@media print {
  body { background: #fff; color: #000; }
  button, form, .nicht-drucken { display: none; }
  .karte { border: 0; background: #fff; }
}