:root {
    --farbe-primaer: #03173d;
    --farbe-akzent: #2e6c74;
    --farbe-rand: #c8ccd4;
    --farbe-hg: #f4f5f7;
    --farbe-fehler: #b3261e;
    --farbe-warnung: #8a5a00;
    --farbe-erfolg: #1b5e20;
    --radius: 6px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    font-size: 16px;
    background: var(--farbe-hg);
    color: #101318;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior: none;
}

.rahmen {
    max-width: 780px;
    margin: 0 auto;
    padding: 12px 14px 32px;
    background: #fff;
    min-height: 100vh;
}

.kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 2px solid var(--farbe-primaer);
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.kopf-logo {
    flex: 0 0 auto;
    height: 46px;
    width: auto;
    max-width: 45%;
    object-fit: contain;
}

.kopf h1 {
    flex: 1 1 auto;
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0;
    color: var(--farbe-primaer);
}

/* Auf schmalen Displays Logo und Titel untereinander, Status rechts daneben */
@media (max-width: 480px) {
    .kopf { flex-wrap: wrap; gap: 8px 10px; }
    .kopf-logo { height: 38px; max-width: 60%; }
    .kopf h1 { flex: 1 1 100%; order: 3; font-size: 1.1rem; }
    .status { margin-left: auto; }
}

.status { font-size: .8rem; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.status-online { background: #e3f2e5; color: var(--farbe-erfolg); }
.status-offline { background: #fdecea; color: var(--farbe-fehler); }
.badge {
    display: inline-block; margin-left: 6px; min-width: 20px; text-align: center;
    background: var(--farbe-primaer); color: #fff; border-radius: 999px; padding: 0 6px;
}

.meldung {
    position: relative; padding: 10px 34px 10px 12px; border-radius: var(--radius);
    margin-bottom: 12px; font-size: .92rem; border: 1px solid transparent;
}
.meldung.info    { background: #e8eefc; border-color: #b9caf0; }
.meldung.erfolg  { background: #e3f2e5; border-color: #a9d3ae; color: var(--farbe-erfolg); }
.meldung.warnung { background: #fff4e0; border-color: #e8cf9a; color: var(--farbe-warnung); }
.meldung.fehler  { background: #fdecea; border-color: #f1b7b2; color: var(--farbe-fehler); }
.meldung-zu {
    position: absolute; top: 4px; right: 6px; background: none; border: 0;
    font-size: 1.3rem; line-height: 1; cursor: pointer; color: inherit;
}

.feld { margin-bottom: 12px; }
.feld > label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; color: #3a414d; }
.feld-zeile { display: flex; gap: 8px; align-items: stretch; }

input[type=text], select {
    flex: 1 1 auto; width: 100%; min-height: 46px; padding: 8px 10px;
    font-size: 1.05rem; border: 1px solid var(--farbe-rand); border-radius: var(--radius);
    background: #fff; color: inherit;
}
input[type=text]:focus, select:focus {
    outline: 3px solid rgba(46,108,116,.35); border-color: var(--farbe-akzent);
}
input:disabled, select:disabled, button:disabled { opacity: .55; cursor: not-allowed; }

.knopf-icon {
    flex: 0 0 auto; width: 52px; min-height: 46px; border: 1px solid var(--farbe-rand);
    border-radius: var(--radius); background: #fff; color: var(--farbe-primaer);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.knopf-icon:active { background: #eef1f6; }

.knopf-klein {
    flex: 0 0 auto; min-height: 46px; padding: 0 14px; border: 1px solid var(--farbe-rand);
    border-radius: var(--radius); background: #fff; cursor: pointer; font-size: .9rem;
}

.liste { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--farbe-rand); border-radius: var(--radius); }
.liste li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-bottom: 1px solid #e8eaee;
}
.liste li:last-child { border-bottom: 0; }
.liste li:nth-child(odd) { background: #fafbfc; }
.liste-nr { font-family: "Consolas", "Courier New", monospace; font-size: 1.05rem; }
.liste-weg {
    background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--farbe-fehler);
    cursor: pointer; padding: 0 6px;
}

.hinweis-leer { margin: 0 0 12px; font-size: .88rem; color: #6b7280; font-style: italic; }

.sig-hinweis { margin: 16px 0 6px; font-size: .92rem; color: #3a414d; }

.sig-bereich { position: relative; border: 1px solid #333; border-radius: var(--radius); background: #fff; }
.sig-bereich canvas { display: block; width: 100%; height: 260px; touch-action: none; border-radius: var(--radius); }
.sig-inaktiv canvas { background: #f2f3f5; }
.sig-sperre {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #8a8f98; font-size: .95rem; pointer-events: none;
}

.knopf-zeile { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.knopf-haupt {
    flex: 1 1 200px; min-height: 54px; font-size: 1.1rem; font-weight: 600;
    background: var(--farbe-primaer); color: #fff; border: 0; border-radius: var(--radius); cursor: pointer;
}
.knopf-sekundaer {
    flex: 0 1 auto; min-height: 54px; padding: 0 16px; font-size: .95rem;
    background: #fff; color: var(--farbe-primaer); border: 1px solid var(--farbe-rand);
    border-radius: var(--radius); cursor: pointer;
}

.warteschlange { margin-top: 22px; font-size: .88rem; }
.warteschlange table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.warteschlange th, .warteschlange td { text-align: left; padding: 5px 6px; border-bottom: 1px solid #e8eaee; }
.warteschlange .fehler { color: var(--farbe-fehler); }
.link { background: none; border: 0; color: var(--farbe-primaer); text-decoration: underline; cursor: pointer; padding: 0; font-size: .88rem; }

.overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 12px;
}
.overlay-inhalt { width: 100%; max-width: 640px; }
/* Feste Vorschaugroesse im Querformat: aendert sich nicht, wenn der Stream startet oder die
   Kamera gewechselt wird. object-fit: cover zeigt das mittlere Band des Kamerabilds -
   genau den Bereich, in dem gelesen wird (1D-Barcodes liegen quer). */
.video-rahmen {
    position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 45vh; margin: 0 auto;
    background: #000; border-radius: var(--radius); overflow: hidden;
    outline: 3px solid var(--farbe-akzent);
}
.video-rahmen video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Ziellinie fuer den Barcode */
.video-rahmen::after {
    content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 2px;
    background: rgba(255, 60, 60, .85); pointer-events: none;
}
.overlay-zeile { display: flex; gap: 8px; margin-top: 12px; }
.overlay-hinweis { color: #d7dae0; font-size: .85rem; text-align: center; margin-top: 10px; }

/* Blazor-Ladeanzeige und Fehlerleiste */
.loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem; }
.loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: .6rem; transform-origin: 50% 50%; transform: rotate(-90deg); }
.loading-progress circle:last-child { stroke: var(--farbe-primaer); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * .8), 500%; transition: stroke-dasharray .05s ease-in-out; }
.loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0; }
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Laden..."); }

#blazor-error-ui {
    background: #ffeb3b; bottom: 0; display: none; left: 0; position: fixed;
    width: 100%; padding: .6rem 1.25rem .7rem 1.25rem; box-shadow: 0 -1px 2px rgba(0,0,0,.2); z-index: 2000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

@media (prefers-color-scheme: dark) {
    html, body { background: #14171c; color: #e8eaee; }
    .rahmen { background: #1b1f26; }
    input[type=text], select, .knopf-icon, .knopf-klein, .knopf-sekundaer { background: #232830; color: #e8eaee; border-color: #3a414d; }
    .liste { border-color: #3a414d; }
    .liste li { border-color: #2a2f38; }
    .liste li:nth-child(odd) { background: #1f242c; }
    .kopf h1, .knopf-sekundaer, .link { color: #9fc4ff; }
    .knopf-haupt { background: #2e6c74; }
    .sig-bereich canvas { background: #fff; }
    .kopf-logo { filter: invert(1) hue-rotate(180deg); }
}