/* EXQR Lizenzportal – Metrik GmbH (INTERN) · Gestaltung im exqr-Stil */
@font-face{font-family:'Manrope';font-weight:400;font-display:swap;src:url('fonts/manrope-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:600;font-display:swap;src:url('fonts/manrope-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Manrope';font-weight:700;font-display:swap;src:url('fonts/manrope-latin-700-normal.woff2') format('woff2')}

:root{
  --akzent:#6C5CFF; --akzent-dunkel:#5647e6; --akzent-hell:#efedff;
  --text:#0A0A0A; --leise:#6b6b78; --bg:#f6f6f9; --karte:#fff; --linie:#e7e7ee;
  --gruen:#15803d; --gruen-bg:#e8f6ee; --rot:#b42318; --rot-bg:#fdecea; --gelb:#8a5a00; --gelb-bg:#fff4dc;
  --radius:14px; --schatten:0 1px 2px rgba(10,10,10,.04),0 4px 14px rgba(10,10,10,.04);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--akzent:#7c6dff;--akzent-dunkel:#6C5CFF;--akzent-hell:#1f1b3d;--text:#fff;--leise:#a1a1ad;--bg:#0A0A0A;--karte:#141418;
    --linie:#26262f;--gruen:#4ade80;--gruen-bg:#0f2a1b;--rot:#f87171;--rot-bg:#2d1212;--gelb:#fbbf24;--gelb-bg:#2b2110;
    --schatten:none;color-scheme:dark}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.55 'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif}
a{color:var(--akzent)}
h1{font-size:1.5rem;margin:0 0 1rem;letter-spacing:-.01em}
h2{font-size:1.08rem;margin:1.6rem 0 .7rem}
.karte h2:first-child{margin-top:0}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86em;background:var(--akzent-hell);padding:.08rem .35rem;border-radius:5px}
.umbruch{word-break:break-all}

.kopf{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;padding:.9rem 24px;background:var(--karte);border-bottom:1px solid var(--linie)}
.marke{display:flex;align-items:center;gap:.55rem;font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap}
.signet{width:22px;height:22px;border-radius:6px;background:var(--akzent);box-shadow:inset -6px -6px 0 rgba(255,255,255,.28)}
nav{display:flex;align-items:center;gap:.25rem;flex:1;flex-wrap:wrap}
nav a{color:var(--leise);text-decoration:none;padding:.4rem .7rem;border-radius:8px;font-weight:600;font-size:.92rem}
nav a:hover{color:var(--text);background:var(--bg)}
nav a.aktiv{color:var(--text);background:var(--akzent-hell)}
.nav-rechts{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.inhalt{max-width:1120px;margin:0 auto;padding:28px 24px 48px}
.fuss{text-align:center;color:var(--leise);font-size:.8rem;padding:0 16px 28px}

.karte{background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--schatten);margin-bottom:1.2rem}
.karte.schmal{max-width:620px}
.karte.hervor{border-color:var(--akzent);background:var(--akzent-hell)}
.karte.leer{text-align:center;color:var(--leise)}
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1.2rem;align-items:start}
.raster .karte{margin-bottom:0}
.raster + h2{margin-top:2rem}
.kopfzeile{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.kopfzeile h1{margin:0}
.leise{color:var(--leise);font-weight:500}
.klein{font-size:.82rem;color:var(--leise)}
.nowrap{white-space:nowrap}

label{display:block;font-weight:600;font-size:.9rem;margin:0 0 .9rem}
label input,label select,label textarea{display:block;width:100%;margin-top:.3rem;font-weight:400}
input,select,textarea{font:inherit;color:var(--text);background:var(--karte);border:1px solid var(--linie);border-radius:9px;padding:.55rem .65rem}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
label.wahl{display:flex;gap:.55rem;align-items:center;font-weight:500}
label.wahl input{width:auto;margin:0}
fieldset{border:1px solid var(--linie);border-radius:12px;padding:.6rem 1rem .3rem;margin:0 0 1.1rem}
legend{font-weight:700;padding:0 .35rem}
.hinweis{font-size:.82rem;color:var(--leise);margin:-.5rem 0 1rem}
.hinweis.warn{color:var(--gelb)}
.code-feld{font-size:1.4rem;letter-spacing:.3em;text-align:center;font-family:ui-monospace,Menlo,monospace}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--akzent);color:#fff;border:0;border-radius:10px;
  padding:.62rem 1.1rem;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;min-height:40px}
.btn:hover{background:var(--akzent-dunkel)}
.btn-hell{background:var(--akzent-hell);color:var(--akzent)}
.btn-hell:hover{background:var(--akzent-hell);color:var(--akzent-dunkel)}
.btn-klein{padding:.35rem .7rem;font-size:.84rem;min-height:32px}
button.link{background:none;border:0;color:var(--leise);font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;padding:.4rem .7rem;border-radius:8px}
button.link:hover{color:var(--text);background:var(--bg)}
form.inline{display:inline}

.meldung{border-radius:10px;padding:.7rem 1rem;margin:0 0 1rem;border:1px solid transparent}
.meldung-ok{background:var(--gruen-bg);color:var(--gruen)}
.meldung-fehler{background:var(--rot-bg);color:var(--rot)}
.meldung-warn{background:var(--gelb-bg);color:var(--gelb)}

.badge{display:inline-block;padding:.1rem .55rem;border-radius:999px;font-size:.74rem;font-weight:700;white-space:nowrap}
.badge-an{background:var(--gruen-bg);color:var(--gruen)}
.badge-aus{background:var(--rot-bg);color:var(--rot)}
.badge-warn{background:var(--gelb-bg);color:var(--gelb)}

.tabelle-rahmen{overflow-x:auto;background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten);margin-bottom:1.2rem}
table.liste{width:100%;border-collapse:collapse;font-size:.9rem}
table.liste th{text-align:left;font-size:.76rem;text-transform:uppercase;letter-spacing:.04em;color:var(--leise);padding:.75rem .9rem;border-bottom:1px solid var(--linie);white-space:nowrap}
table.liste td{padding:.7rem .9rem;border-bottom:1px solid var(--linie);vertical-align:top}
table.liste code{white-space:nowrap}
table.liste tr:last-child td{border-bottom:0}
table.liste tr.inaktiv td{opacity:.55}
table.liste tr.warnzeile td{background:var(--gelb-bg)}
table.daten{border-collapse:collapse;width:100%;font-size:.92rem}
table.daten th{text-align:left;font-weight:600;color:var(--leise);padding:.45rem 1rem .45rem 0;width:38%;vertical-align:top;border-bottom:1px solid var(--linie)}
table.daten td{padding:.45rem 0;border-bottom:1px solid var(--linie)}
.aktionen{display:flex;gap:.35rem;flex-wrap:wrap}
.link-form{display:flex;gap:.5rem;align-items:flex-end;flex-wrap:wrap}
.link-form label{margin:0;font-size:.75rem;font-weight:600;color:var(--leise)}
.link-form input{width:4.6rem;padding:.35rem .45rem}

.suche{display:flex;gap:.5rem;margin:0 0 1rem;max-width:520px}
.suche input{flex:1}
.kopierzeile{display:flex;gap:.5rem}
.kopierzeile input{flex:1;font-family:ui-monospace,Menlo,monospace;font-size:.85rem}
.aufklapp{margin-top:1.2rem}
.aufklapp summary{cursor:pointer;font-weight:600;color:var(--akzent)}
.aufklapp[open] summary{margin-bottom:.8rem}
.pruefliste{list-style:none;padding:0;margin:0 0 1.2rem;font-size:.9rem}
.pruefliste li{padding:.2rem 0}
.pruefliste .ok{color:var(--gruen)} .pruefliste .nein{color:var(--rot)}
.totp-qr{width:220px;max-width:100%;margin:1rem 0;background:#fff;padding:10px;border-radius:10px}
.totp-qr svg{display:block;width:100%;height:auto}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (max-width:700px){
  .kopf{padding:.8rem 16px;gap:.5rem;flex-direction:column;align-items:stretch}
  nav{width:100%}
  .inhalt{padding:20px 16px 40px}
  .nav-rechts{margin-left:0}
  nav{gap:0}
  nav a{padding:.45rem .55rem}
}

/* ---------- Einrichtung im Unternehmenslook ---------- */
.knopfgruppe{display:flex;gap:.5rem;flex-wrap:wrap}
.fortschritt{display:flex;align-items:center;gap:.8rem;margin:0 0 1.2rem;font-size:.88rem;color:var(--leise)}
.fortschritt-balken{display:inline-block;width:180px;height:8px;border-radius:99px;background:var(--linie);overflow:hidden;vertical-align:middle}
.fortschritt-balken span{display:block;height:100%;background:var(--akzent);border-radius:99px}
.fortschritt-mini{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--leise);font-size:.82rem;white-space:nowrap}
.fortschritt-mini .fortschritt-balken{width:60px;height:6px}
.einrichtung-raster{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:1.2rem;align-items:start;margin-bottom:1.2rem}
.einrichtung-form .karte{margin-bottom:1.2rem}
.nr{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--akzent-hell);
  color:var(--akzent);font-size:.85rem;margin-right:.4rem}
.bild-feld{display:grid;grid-template-columns:120px minmax(0,1fr);gap:1rem;align-items:start;padding:.8rem 0;border-top:1px solid var(--linie)}
.bild-feld:first-of-type{border-top:0;padding-top:0}
.bild-vorschau{height:72px;border:1px dashed var(--linie);border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:#fff;padding:8px;overflow:hidden}
.bild-vorschau.dunkel{background:#141418}
.bild-vorschau img{max-width:100%;max-height:100%;object-fit:contain}
.leer-text{font-size:.75rem;color:#8a8a96}
.bild-angaben label{margin-bottom:.4rem}
.bild-angaben .hinweis{margin:0 0 .4rem}
.farbzeile{display:flex;gap:.8rem;align-items:flex-end}
.farbzeile input[type=color]{width:64px;height:44px;padding:3px;cursor:pointer;flex:0 0 auto}
.farbzeile label{flex:1;margin:0}
.farbmuster{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.84rem;color:var(--leise);margin:-.2rem 0 .8rem}
.farbmuster span{display:inline-flex;align-items:center;gap:.45rem}
.farbmuster i{width:22px;height:22px;border-radius:6px;display:inline-block;border:1px solid var(--linie)}
.zwei-spalten{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.nur-info{margin-top:.9rem}
.speicherleiste{position:sticky;bottom:0;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding:.9rem 1.1rem;
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten)}
.hinweis-inline{font-size:.82rem;color:var(--leise)}
.paketzeile{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap}
.paketzeile label{margin:0;min-width:240px}

.vorschau-spalte{position:sticky;top:1rem}
.vorschau-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.umschalter{display:inline-flex;background:var(--linie);border-radius:9px;padding:3px}
.umschalter button{border:0;background:none;font:inherit;font-size:.82rem;font-weight:600;padding:.3rem .8rem;border-radius:7px;cursor:pointer;color:var(--leise)}
.umschalter button.aktiv{background:var(--karte);color:var(--text)}
.vorschau{--v-akzent:#6C5CFF;--v-akzent-h:#5F51E0;--v-bg:#f5f5f8;--v-karte:#fff;--v-text:#0A0A0A;--v-leise:#6b6b76;--v-linie:#e7e7ee;
  background:var(--v-bg);color:var(--v-text);border:1px solid var(--linie);border-radius:var(--radius);padding:.9rem;font-size:13px}
.vorschau[data-modus=dunkel]{--v-bg:#0A0A0A;--v-karte:#141418;--v-text:#fff;--v-leise:#a1a1ad;--v-linie:#26262f}
.vs-titel{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--v-leise);font-weight:700;margin:.2rem 0 .45rem}
.vs-titel .leise{text-transform:none;letter-spacing:0;font-weight:500}
.vs-app,.vs-start{background:var(--v-karte);border:1px solid var(--v-linie);border-radius:10px;overflow:hidden;margin-bottom:1rem}
.vs-topbar{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.6rem .8rem;border-bottom:1px solid var(--v-linie)}
.vs-logo{display:inline-flex;align-items:center;gap:.5rem;min-width:0}
.vs-logo img{height:22px;max-width:120px;object-fit:contain;display:block}
.vs-logo-gross img{height:40px;max-width:200px}
.vs-logo .vs-logo-dunkel{display:none}
.vorschau[data-modus=dunkel] .vs-logo.hat-dunkel .vs-logo-hell{display:none}
.vorschau[data-modus=dunkel] .vs-logo.hat-dunkel .vs-logo-dunkel{display:block}
.vorschau[data-modus=dunkel] .vs-logo:not(.hat-dunkel) .vs-logo-hell{background:#fff;padding:3px 6px;border-radius:6px}
.vs-logo img[hidden],.vs-logo [hidden]{display:none!important}
.vs-ersatz{display:inline-block;padding:.2rem .5rem;border:1px dashed var(--v-linie);border-radius:6px;color:var(--v-leise);font-size:.75rem}
.vs-zusatz{font-weight:600;color:var(--v-leise);border-left:1px solid var(--v-linie);padding-left:.5rem;white-space:nowrap}
.vs-zusatz:empty{display:none}
.vs-nav{display:flex;gap:.6rem;font-size:.75rem;color:var(--v-leise)}
.vs-nav b{color:var(--v-text)}
.vs-inhalt{padding:.8rem}
.vs-zeile{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.vs-btn{display:inline-block;background:var(--v-akzent);color:#fff;font-weight:700;font-size:.75rem;padding:.35rem .7rem;border-radius:7px}
.vs-karte{border:1px solid var(--v-linie);border-radius:8px;padding:.55rem .6rem;display:flex;gap:.5rem;align-items:center;font-size:.78rem}
.vs-chip{background:color-mix(in srgb,var(--v-akzent) 15%,transparent);color:var(--v-akzent);font-weight:700;font-size:.66rem;padding:.1rem .45rem;border-radius:99px}
.vs-link{margin-left:auto;color:var(--v-akzent);font-weight:600}
.vs-fuss{text-align:center;color:var(--v-leise);font-size:.68rem;margin-top:.7rem}
.vs-start{padding:1.2rem;text-align:center;
  background:radial-gradient(80% 60% at 50% 0%, color-mix(in srgb,var(--v-akzent) 14%,transparent), transparent 70%), var(--v-karte)}
.vs-start-info{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.vs-start-info strong{font-size:1rem}
.vs-start-info p{margin:0;color:var(--v-leise);font-size:.78rem;line-height:1.5;white-space:pre-line}
.vs-start-weiter,.vs-start-anmeldung{color:var(--v-leise);font-size:.8rem;line-height:1.6;padding:1rem 0}
.vs-start-weiter strong,.vs-start-anmeldung strong{color:var(--v-text);word-break:break-all}
.vorschau .hinweis{margin:0;color:var(--v-leise)}

.checkliste{list-style:none;counter-reset:s;padding:0;margin:0}
.checkliste li{border-top:1px solid var(--linie);padding:.75rem 0}
.checkliste li:first-child{border-top:0}
.schritt-kopf{display:flex;gap:.8rem;align-items:flex-start}
.schritt-kopf strong{display:block}
.haken{flex:0 0 auto;width:28px;height:28px;border-radius:8px;border:2px solid var(--linie);background:var(--karte);cursor:pointer;
  font-weight:700;color:#fff;font-size:.9rem;line-height:1}
.haken:hover{border-color:var(--akzent)}
.erledigt .haken{background:var(--gruen);border-color:var(--gruen)}
.erledigt .schritt-kopf strong{color:var(--leise)}
.schritt-felder{display:grid;grid-template-columns:160px 1fr;gap:.2rem .8rem;margin:.6rem 0 0 2.6rem;align-items:end}
.schritt-felder label{margin:0 0 .5rem;font-size:.8rem}
.schritt-felder .breit{grid-column:1 / -1}
.schritt-felder > .btn{justify-self:start}
.schritt-felder.einzeilig{grid-template-columns:1fr auto;align-items:center}
.schritt-felder.einzeilig input{padding:.4rem .55rem;font-size:.86rem}
@media (max-width:980px){.einrichtung-raster{grid-template-columns:1fr}.vorschau-spalte{position:static;order:-1}}
@media (max-width:600px){.zwei-spalten,.schritt-felder{grid-template-columns:1fr}.schritt-felder{margin-left:0}
  .bild-feld{grid-template-columns:1fr}.speicherleiste{position:static}}
.vs-start [hidden]{display:none!important}
.hinweisliste{margin:0 0 1rem;padding-left:1.2rem;font-size:.88rem;color:var(--leise)} .hinweisliste li{margin:.2rem 0}