zulassung-ocr-compare/ocr_compare/style.css

:root {font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#16233a;background:#f3f6f8;line-height:1.45}
* {box-sizing:border-box}
body {margin:0}
.wrap {width:min(1240px,calc(100% - 32px));margin:auto}
.top {background:#133345;color:white;padding:24px 0 28px}
h1,h2,h3,h4,p {margin:0}
h1 {font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.035em}
h2 {font-size:1.35rem;letter-spacing:-.025em}
h3 {font-size:1.1rem}
h4 {font-size:.95rem;margin:22px 0 8px}
.top p:last-child {color:#d6e6e9;margin-top:5px}
.eyebrow {font-size:.72rem;text-transform:uppercase;font-weight:800;letter-spacing:.13em;color:#238476;margin-bottom:5px}
.top .eyebrow {color:#8be0c8}
main {padding:22px 0 50px}
.panel {background:white;border:1px solid #dbe5e9;border-radius:14px;padding:22px;margin-bottom:20px;box-shadow:0 6px 30px rgba(20,46,64,.045)}
.section-head {display:flex;align-items:start;justify-content:space-between;gap:18px;margin-bottom:18px}
.privacy {font-size:.76rem;font-weight:700;color:#177868;background:#e9f6f1;border-radius:100px;padding:6px 11px;white-space:nowrap}
.upload-label {display:block;font-weight:700;margin-bottom:6px}
input[type=file] {display:block;width:100%;padding:12px;border:1px dashed #9eb5c0;background:#f8fbfc;border-radius:9px;color:#20384a}
.muted {color:#617585;font-size:.87rem;margin-top:9px}
.image-wrap,.processed-wrap {position:relative;display:block;width:100%;margin-top:18px;background:#e9eff1;border:1px solid #ccd9df;border-radius:8px;overflow:hidden}
.image-wrap[hidden],#comparison[hidden] {display:none}
.image-wrap img,.processed-wrap img {display:block;width:100%;height:auto}
.image-wrap canvas,.processed-wrap canvas {position:absolute;inset:0;width:100%;height:100%}
.image-wrap canvas {touch-action:none;cursor:crosshair}
.processed-wrap canvas {pointer-events:none}
.toolbar {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:15px}
.toolbar label {font-size:.88rem;font-weight:700}
.toolbar label[for=rotation] {margin-left:auto}
.toolbar .toggle {display:flex;align-items:center;gap:6px;margin-left:0;white-space:normal}
button,select,input[type=text] {font:inherit}
button,select {border-radius:8px;border:1px solid #9bb4bf;background:white;color:#193949;padding:9px 12px}
button {cursor:pointer;font-weight:650}
button:hover:not(:disabled) {background:#e8f2f3}
button:disabled {cursor:not-allowed;opacity:.52}
.primary {background:#007d73;color:white;border-color:#007d73}
.primary:hover:not(:disabled) {background:#00695f}
.status {min-height:1.4em;margin-top:12px;font-weight:650}
.status.error,.error {color:#ac273c}
.status.ok {color:#08786d}
.toggle {font-size:.85rem;color:#3d5667;white-space:nowrap}
.results {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.method {border:1px solid #d4e2e6;border-radius:11px;padding:17px;min-width:0}
.method:first-child {border-top:4px solid #087c75}
.method:last-child {border-top:4px solid #465fc7}
.meta {font-size:.84rem;color:#526d7b;margin-top:5px}
.note {font-size:.82rem;color:#815b13;background:#fff8e5;padding:9px;border-radius:6px;margin-top:10px}
.assignment-note {font-size:.82rem;color:#385469;background:#eef5f8;padding:9px;border-radius:6px;margin-top:10px}
.field-list {display:grid;gap:7px}
.field-item {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:3px;background:#f8fbfc;border:1px solid #dce7ea;border-radius:8px;overflow-wrap:anywhere}
.field-item.needs-review {background:#fff9eb;border-color:#e4c886}
.field-show {display:grid;grid-template-columns:minmax(88px,110px) minmax(0,1fr);gap:2px 8px;width:100%;text-align:left;border:0;background:transparent;padding:6px 7px}
.field-heading {grid-row:1 / 3;display:flex;flex-direction:column;gap:2px}
.field-heading strong {color:#126d65}
.field-heading small,.field-method {font-size:.73rem;color:#607783}
.field-value {font-weight:650;overflow-wrap:anywhere;white-space:pre-line}
.priority-fields {display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.priority-fields h5 {flex-basis:100%;margin:0;font-size:.9rem}
.priority-item {min-width:0;padding:3px 7px;border-radius:6px;background:#e8f6ef;color:#155d3d;font-size:.83rem;overflow-wrap:anywhere}
.priority-item.missing {background:#fff2e9;color:#8a431d}
.field-method {grid-column:2}
.field-dismiss {align-self:center;font-size:.73rem;padding:6px 7px;color:#6d4050;border-color:#d9c9ce;background:white}
.raw-lines {max-height:280px;overflow:auto;border:1px solid #e3ecef;border-radius:8px;padding:6px;display:grid;gap:4px}
.raw-entry {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px}
.raw-line {display:flex;align-items:start;text-align:left;gap:9px;width:100%;padding:8px 10px;background:#f8fbfc;border-color:#dce7ea;overflow-wrap:anywhere;font-weight:400;font-size:.82rem}
.raw-line span {color:#617783;min-width:28px}
.raw-line span:last-child {color:#193949;min-width:0}
.raw-pick {font-size:.72rem;padding:5px 7px}
.manual {display:grid;grid-template-columns:minmax(100px,1fr) minmax(100px,2fr);gap:7px}
.manual input {grid-column:1 / -1;border:1px solid #9bb4bf;border-radius:8px;padding:9px;width:100%}
.manual button {justify-self:start}
.manual-hint {grid-column:1 / -1;color:#617585;font-size:.78rem}
@media(max-width:800px) {.results {grid-template-columns:1fr}.privacy {white-space:normal}.toolbar label {margin-left:0}}
@media(max-width:520px) {.wrap {width:min(100% - 20px,1240px)}.panel {padding:14px}.section-head {display:block}.privacy {display:inline-block;margin-top:10px}.toolbar {display:grid;grid-template-columns:1fr 1fr}.toolbar .primary,.toolbar .toggle {grid-column:1/-1}.toolbar label {align-self:center}.toolbar label[for=rotation] {margin-left:0}.toggle {display:block;margin-top:10px}.field-show {grid-template-columns:1fr}.field-heading {grid-row:auto}.field-method {grid-column:1}.raw-entry {grid-template-columns:minmax(0,1fr)}.raw-pick {justify-self:end}}