:root {
    --hintergrund: #f6f7f8;
    --flaeche: #ffffff;
    --text: #1c1f23;
    --text-leise: #5b6470;
    --linie: #d5dae0;
    --akzent: #0b5cad;
    --ok: #1d6b34;
    --ok-flaeche: #e6f4ea;
    --fehler: #a11a1a;
    --fehler-flaeche: #fbe9e9;
    --hin-flaeche: #fff6e0;
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hintergrund: #15181c;
        --flaeche: #1e2227;
        --text: #e8eaed;
        --text-leise: #9aa4b1;
        --linie: #343a42;
        --akzent: #6cb0f5;
        --ok: #7fd19a;
        --ok-flaeche: #17301f;
        --fehler: #f19999;
        --fehler-flaeche: #3a1c1c;
        --hin-flaeche: #332a14;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--hintergrund);
    color: var(--text);
    font: 16px/1.5 "Segoe UI", system-ui, sans-serif;
}

a { color: var(--akzent); }

.kopf {
    padding: 12px 16px;
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
}

.kopf a {
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px;
}

h1 { font-size: 1.5rem; margin: 8px 0 12px; }

label { display: block; font-weight: 600; margin-bottom: 4px; }

input {
    font: inherit;
    padding: 8px 10px;
    border: 1px solid var(--linie);
    border-radius: 6px;
    background: var(--flaeche);
    color: var(--text);
}

button {
    font: inherit;
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    background: var(--akzent);
    color: #fff;
    cursor: pointer;
}

@media (prefers-color-scheme: dark) {
    button { color: #10151b; }
}

button.klein { padding: 4px 10px; margin-left: 8px; }

.code-formular input {
    font-size: 1.6rem;
    letter-spacing: 0.1em;
    width: 100%;
    max-width: 320px;
    margin-bottom: 12px;
    display: block;
}

.senden { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 16px 0 8px; }
.senden label { flex-basis: 100%; margin: 0; }
.senden input { flex: 1 1 240px; font-family: Consolas, monospace; }

.meldung {
    padding: 10px 12px;
    border-radius: 6px;
    background: var(--flaeche);
    border: 1px solid var(--linie);
}

.meldung.ok { background: var(--ok-flaeche); color: var(--ok); border-color: transparent; }
.meldung.fehler { background: var(--fehler-flaeche); color: var(--fehler); border-color: transparent; }

.telegramme {
    width: 100%;
    border-collapse: collapse;
    background: var(--flaeche);
    font-size: 0.9rem;
    display: block;
    overflow-x: auto;
}

.telegramme th, .telegramme td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--linie);
    text-align: left;
    white-space: nowrap;
}

.telegramme th { color: var(--text-leise); font-weight: 600; }
.telegramme tr.hin { background: var(--hin-flaeche); }
.telegramme .hex { font-family: Consolas, monospace; }

#blazor-error-ui {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    padding: 10px 16px;
    background: var(--fehler-flaeche);
    color: var(--fehler);
}