@font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root { --ink: #050f21; --ink2: #4a5468; --ink3: #6b7280; --linie: #e3e6ec; --flaeche: #f6f7f9; --akzent: #0b5cff; --gefahr: #c62828; --ok: #1b7f3b; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: "Inter", system-ui, sans-serif; color: var(--ink); background: #fff; line-height: 1.55; overflow-wrap: anywhere; }
.kopf { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 16px; border-bottom: 1px solid var(--linie); }
.marke { font-weight: 800; letter-spacing: .04em; }
.kopf-sub { color: var(--ink3); font-size: 14px; }
.inhalt { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
.fuss { max-width: 760px; margin: 0 auto; padding: 16px; color: var(--ink3); font-size: 13px; }
.fuss a { color: inherit; }
h1 { font-size: 22px; margin: 0 0 8px; line-height: 1.3; }
h2 { font-size: 16px; margin: 24px 0 8px; }
.hinweis { color: var(--ink2); }
.fehler { color: var(--gefahr); font-weight: 600; }
.fehler:empty { display: none; }
.ok { color: var(--ok); }
.feld { display: block; margin: 16px 0; }
.feld span { display: block; font-size: 14px; color: var(--ink2); margin-bottom: 6px; }
input[type=text] { width: 100%; max-width: 320px; height: 44px; padding: 0 12px; font: inherit; font-size: 16px; border: 1px solid var(--linie); border-radius: 6px; }
input[type=text]:focus, button:focus-visible, .knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
button, .knopf { display: inline-block; min-height: 46px; padding: 0 20px; font: inherit; font-weight: 600; border-radius: 6px; border: 0; background: var(--akzent); color: #fff; cursor: pointer; text-decoration: none; line-height: 46px; text-align: center; }
button.zweit, .knopf.zweit { background: var(--flaeche); color: var(--ink); border: 1px solid var(--linie); }
button:disabled { opacity: .5; cursor: not-allowed; }
.vertrag { border: 1px solid var(--linie); border-radius: 8px; padding: 16px; max-height: 60vh; overflow: auto; background: var(--flaeche); margin: 16px 0 8px; }
.vertrag h2 { font-size: 17px; margin: 0 0 8px; }
.vertrag h3 { font-size: 15px; margin: 16px 0 4px; }
.vertrag p, .vertrag li { font-size: 14px; margin: 4px 0; }
.vertrag ul { margin: 4px 0; padding-left: 20px; }
.hash { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; color: var(--ink2); }
.erklaerung { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; font-size: 15px; }
.erklaerung input { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.pad { width: 100%; height: 180px; border: 1px dashed var(--ink3); border-radius: 8px; touch-action: none; background: #fff; display: block; }
.leiste { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; align-items: center; }
@media (max-width: 480px) { h1 { font-size: 20px; } .leiste > * { flex: 1 1 100%; } }