/* mmvt DGUV-Portal — passend zu mmvt.de (navy / cyan) */
:root {
    --akzent: #00c4e8;
    --highlight: #f0c040;
    --nav-bg: #0a1a28;
    --bg: #0f2233;
    --karte: #122233;
    --fuss-bg: #060f18;
    --text: #e8f4f8;
    --dim: #7ab0c4;
    --linie: #1c3a52;
    --rot: #e06060;
    --gruen: #4cd18a;
    --kopf: 'Barlow Condensed', sans-serif;
    --schrift: 'Barlow', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--schrift); background: var(--bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; font-size: 15px; line-height: 1.5; }
a { color: var(--akzent); }
code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: var(--nav-bg); padding: 2px 6px; border: 1px solid var(--linie); word-break: break-all; }

.kopf { background: var(--nav-bg); border-bottom: 2px solid var(--akzent); padding: 0 24px; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: sticky; top: 0; z-index: 10; }
.marke { font-family: var(--kopf); font-weight: 700; font-size: 22px; letter-spacing: 1px; color: #fff; text-decoration: none; text-transform: uppercase; }
.marke span { color: var(--akzent); font-weight: 900; }
.kopf nav { display: flex; gap: 4px; flex-wrap: wrap; }
.kopf nav a { color: var(--dim); text-decoration: none; font-family: var(--kopf); font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 12px; border-bottom: 2px solid transparent; }
.kopf nav a:hover, .kopf nav a.aktiv { color: #fff; border-bottom-color: var(--akzent); }
.kopf nav a.aus { color: var(--rot); }

.inhalt { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 32px 24px 48px; display: flex; flex-direction: column; gap: 24px; }
.fuss { background: var(--fuss-bg); color: #4a7a90; font-size: 12px; padding: 18px 24px; text-align: center; border-top: 1px solid var(--linie); }

h1 { font-family: var(--kopf); font-weight: 900; font-size: 38px; line-height: 1.1; color: #fff; letter-spacing: .5px; margin-bottom: 10px; }
h2 { font-family: var(--kopf); font-weight: 700; font-size: 24px; color: #fff; margin-bottom: 8px; }
.klein-titel { font-size: 18px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 14px; }
.eyebrow { font-family: var(--kopf); color: var(--akzent); text-transform: uppercase; letter-spacing: 3px; font-size: 13px; margin-bottom: 6px; }
.dim { color: var(--dim); }
.klein { font-size: 12px; }
.rechts { text-align: right; }

.karte { background: var(--karte); border: 1px solid var(--linie); padding: 24px; }
.karte.schmal { max-width: 520px; }

label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--dim); margin-bottom: 14px; }
input[type=text], input[type=password], select { display: block; width: 100%; margin-top: 6px; background: var(--nav-bg); border: 1px solid var(--linie); color: var(--text); font: inherit; font-size: 16px; padding: 11px 12px; text-transform: none; letter-spacing: 0; outline: none; border-radius: 0; }
input:focus, select:focus { border-color: var(--akzent); }

.knopf { display: inline-block; background: var(--akzent); color: #04121c; border: 0; font-family: var(--kopf); font-weight: 700; font-size: 16px; letter-spacing: 1.5px; text-transform: uppercase; padding: 11px 22px; cursor: pointer; text-decoration: none; }
.knopf:hover { opacity: .88; }
.knopf:disabled { opacity: .5; cursor: wait; }
.knopf.voll { width: 100%; margin-top: 6px; }
.knopf.zweit { background: transparent; color: var(--akzent); border: 1px solid var(--akzent); }
.knopf.klein { padding: 7px 12px; font-size: 13px; }
.link-rot { background: none; border: 0; color: var(--rot); font: inherit; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }

.hinweis { padding: 10px 14px; border-left: 3px solid var(--akzent); background: rgba(0,196,232,.08); margin: 10px 0; font-size: 14px; }
.hinweis.fehler { border-color: var(--rot); background: rgba(224,96,96,.1); }
.hinweis.ok { border-color: var(--gruen); background: rgba(76,209,138,.08); }

/* Login */
.login { display: flex; justify-content: center; padding-top: 6vh; }
.login-karte { width: 100%; max-width: 400px; }
.login-karte h1 { margin-bottom: 18px; }

/* Suche */
.suchfeld { display: flex; gap: 0; max-width: 640px; margin: 8px 0; }
.suchfeld input { margin: 0; font-size: 22px; font-family: var(--kopf); letter-spacing: 1px; padding: 12px 16px; }
.suchfeld .knopf { white-space: nowrap; }

.ergebnis { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 20px; align-items: start; }
.karte.liste { padding: 0; }
.sn-kopf { padding: 18px 20px; border-bottom: 1px solid var(--linie); display: flex; flex-direction: column; }
.sn-kopf strong { font-family: var(--kopf); font-size: 32px; color: #fff; letter-spacing: 1px; line-height: 1.1; }
.sn-kopf .geraet { color: var(--text); font-weight: 600; margin: 2px 0; }
.faellig { color: var(--highlight); }
.chips small { color: var(--dim); font-family: var(--schrift); font-size: 12px; }
.liste ul { list-style: none; }
.liste li { border-bottom: 1px solid rgba(28,58,82,.6); padding: 12px 20px; }
.liste li.gewaehlt { background: rgba(0,196,232,.08); box-shadow: inset 3px 0 0 var(--akzent); }
.eintrag { display: block; text-decoration: none; color: var(--text); }
.eintrag .datum { display: block; font-weight: 600; }
.eintrag .datum em { font-style: normal; font-size: 11px; color: #04121c; background: var(--highlight); padding: 1px 6px; margin-left: 6px; text-transform: uppercase; letter-spacing: 1px; vertical-align: 2px; }
.eintrag .datei { display: block; font-size: 12px; color: var(--dim); word-break: break-all; }
.aktionen { display: flex; gap: 14px; margin-top: 6px; align-items: center; }
.aktionen a { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; }
.karte.viewer { padding: 0; height: calc(100vh - 200px); min-height: 520px; position: relative; }
.viewer iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.mobil-oeffnen { display: none; }

.leer h2 { margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chips a { border: 1px solid var(--linie); padding: 6px 12px; text-decoration: none; font-family: var(--kopf); font-size: 17px; letter-spacing: .5px; }
.chips a:hover { border-color: var(--akzent); }

/* Tabellen */
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th { text-align: left; font-weight: 400; color: #4a7a90; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; padding: 8px 10px; border-bottom: 1px solid var(--linie); }
.tabelle td { padding: 9px 10px; border-bottom: 1px solid rgba(28,58,82,.5); vertical-align: middle; word-break: break-word; }
.tabelle td.status.ok { color: var(--gruen); }
.tabelle td.status.fehler { color: var(--rot); }
.sn-eingabe { display: inline-block !important; width: 150px !important; margin: 0 !important; padding: 6px 8px !important; font-size: 15px !important; }
.sn-eingabe.fehlt { border-color: var(--rot) !important; }
.neu { color: var(--highlight); }
.zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.zeile input { width: auto; margin: 0; }
details.inline, form.inline { display: inline-block; margin-left: 12px; vertical-align: middle; }
details summary { cursor: pointer; color: var(--akzent); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }

/* Upload */
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 2px dashed var(--linie); padding: 44px 20px; text-align: center; cursor: pointer; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--text); margin: 0; }
.dropzone strong { font-family: var(--kopf); font-size: 24px; letter-spacing: 1px; }
.dropzone.ueber, .dropzone:hover { border-color: var(--akzent); background: rgba(0,196,232,.05); }
.dropzone input { display: none; }
#vorschau { margin-top: 20px; overflow-x: auto; }
dl.api { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 14px 0; align-items: center; }
dl.api dt { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
code.geheim { filter: blur(5px); cursor: pointer; user-select: none; }
code.geheim.offen { filter: none; user-select: all; }

@media (max-width: 860px) {
    .ergebnis { grid-template-columns: 1fr; }
    .karte.viewer { height: auto; min-height: 0; padding: 16px; }
    .viewer iframe { display: none; }
    .mobil-oeffnen { display: block; text-align: center; }
}
@media (max-width: 560px) {
    .kopf { padding: 8px 16px; }
    .inhalt { padding: 20px 16px 36px; }
    h1 { font-size: 30px; }
    .suchfeld { flex-direction: column; gap: 8px; }
    .karte { padding: 18px; }
    dl.api { grid-template-columns: 1fr; }
    .tabelle { font-size: 13px; }
}

.titelzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.titelzeile .klein-titel { margin-bottom: 14px; }
.ok-text { color: var(--gruen); }
.rot-text { color: var(--rot); }
.badge { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; border: 1px solid currentColor; font-style: normal; }
.badge.ok { color: var(--gruen); }
.badge.nein { color: var(--rot); }

/* Barcode-Scanner */
.scan-knopf { display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; background: var(--nav-bg); color: var(--akzent); border: 1px solid var(--linie); border-left: 0; }
.scan-knopf[hidden] { display: none; }
.scan-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(4,12,20,.94); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; }
.scan-box { position: relative; width: min(92vw, 520px); aspect-ratio: 4 / 3; border: 2px solid var(--akzent); overflow: hidden; background: #000; }
.scan-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-linie { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--rot); box-shadow: 0 0 10px var(--rot); }
.scan-info { color: var(--text); text-align: center; max-width: 520px; }
@media (max-width: 560px) {
    .suchfeld { flex-direction: row; flex-wrap: wrap; gap: 0; }
    .suchfeld input { flex: 1 1 100%; margin-bottom: 8px; }
    .suchfeld .scan-knopf { flex: 0 0 64px; border-left: 1px solid var(--linie); padding: 12px 0; }
    .suchfeld .knopf[type=submit] { flex: 1; }
}

.scan-steuer { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.scan-steuer [hidden] { display: none; }
.scan-tipp { text-align: center; max-width: 520px; }
.scan-box video { cursor: crosshair; }