@font-face { font-family: 'Open Sans'; font-weight: 400; font-display: swap; src: url('fonts/OpenSans-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 600; font-display: swap; src: url('fonts/OpenSans-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-weight: 700; font-display: swap; src: url('fonts/OpenSans-Bold.woff2') format('woff2'); }

:root {
  --blau: #2C99E0; --dunkel: #1A3A5C; --tief: #0F2137; --warm: #F8F6F1; --weiss: #fff;
  --text: #1A2A3A; --grau: #6B7C8D; --rand: #D4DDE6; --gruen: #27AE60; --rot: #C0392B;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; background: var(--warm); color: var(--text);
  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.55;
}
.mitte { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.karte {
  width: 100%; max-width: 400px; background: var(--weiss); border: 1px solid var(--rand);
  border-top: 4px solid var(--blau); border-radius: 14px; padding: 32px 28px; box-shadow: 0 8px 30px rgba(15, 33, 55, 0.08);
}
.logo { display: block; height: 42px; margin: 0 auto 18px; }
h1 { font-size: 21px; color: var(--dunkel); margin: 0 0 4px; text-align: center; }
.unter { text-align: center; color: var(--grau); font-size: 13px; margin: 0 0 24px; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--dunkel); margin: 14px 0 6px; }
input[type=text], input[type=email], input[type=password], input[type=number], select {
  width: 100%; padding: 11px 12px; font: inherit; color: var(--text); background: #fff;
  border: 1px solid var(--rand); border-radius: 8px; outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus { border-color: var(--blau); box-shadow: 0 0 0 3px rgba(44, 153, 224, .18); }
.pw { position: relative; }
.pw input { padding-right: 76px; }
.pw button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent;
  color: var(--blau); font: 600 12px 'Open Sans', sans-serif; cursor: pointer; padding: 6px 8px;
}
.haken { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13px; color: var(--grau); font-weight: 400; }
.haken input { width: 16px; height: 16px; margin: 0; }
.knopf {
  display: block; width: 100%; margin-top: 22px; padding: 12px; border: 0; border-radius: 9px; cursor: pointer;
  background: var(--dunkel); color: #fff; font: 700 15px 'Open Sans', sans-serif; transition: background .15s;
}
.knopf:hover { background: var(--tief); }
.knopf:disabled { opacity: .6; cursor: wait; }
.klein { font-size: 13px; text-align: center; margin-top: 18px; }
a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }
.meldung { border-radius: 8px; padding: 10px 12px; font-size: 13px; margin: 0 0 12px; }
.meldung.fehler { background: #FDEDEB; color: #922B21; border: 1px solid #F5C6C0; }
.meldung.ok { background: #EAF7EF; color: #1E7A45; border: 1px solid #BFE6CD; }
.meldung.info { background: #E8F4FD; color: #1D5F8C; border: 1px solid #C3E0F5; }
.regeln { list-style: none; padding: 0; margin: 10px 0 0; font-size: 12.5px; }
.regeln li { color: var(--grau); padding-left: 20px; position: relative; margin: 3px 0; }
.regeln li::before { content: '○'; position: absolute; left: 2px; }
.regeln li.erfuellt { color: var(--gruen); }
.regeln li.erfuellt::before { content: '✓'; }
.fuss { text-align: center; font-size: 11px; color: var(--grau); margin-top: 18px; }
[hidden] { display: none !important; }

/* Verwaltung */
.seite { max-width: 1040px; margin: 0 auto; padding: 24px 16px 60px; }
.kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.kopf h1 { text-align: left; margin: 0; }
.kopf .rechts { font-size: 13px; color: var(--grau); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.block { background: #fff; border: 1px solid var(--rand); border-radius: 12px; padding: 20px; margin-bottom: 18px; }
.block h2 { font-size: 16px; color: var(--dunkel); margin: 0 0 12px; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabelle th { text-align: left; color: var(--grau); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--rand); white-space: nowrap; }
.tabelle td { padding: 9px 6px; border-bottom: 1px solid #EEF2F6; vertical-align: middle; }
.scroll { overflow-x: auto; }
.marke { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.marke.admin { background: #E8F4FD; color: #1D5F8C; }
.marke.kunde { background: #FEF5E7; color: #9A5B13; }
.marke.aus { background: #FDEDEB; color: #922B21; }
.marke.offen { background: #F2F4F7; color: var(--grau); }
.mini { border: 1px solid var(--rand); background: #fff; color: var(--dunkel); border-radius: 7px; padding: 5px 9px; font: 600 12px 'Open Sans', sans-serif; cursor: pointer; margin: 2px 2px 2px 0; }
.mini:hover { border-color: var(--blau); }
.mini.rot { color: var(--rot); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }
.zeile-knopf { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.zeile-knopf .knopf { width: auto; margin: 0; padding: 10px 18px; }
.knopf.hell { background: #fff; color: var(--dunkel); border: 1px solid var(--rand); }
.knopf.hell:hover { background: #F2F6FA; }
.protokoll td { white-space: nowrap; }
.unter.links { text-align: left; margin: 0 0 4px; }
.text-klein { font-size: 13px; margin: 0; }
.nebeninfo { font-weight: 400; color: var(--grau); font-size: 12px; }
.fett { font-weight: 600; }
/* Trenner zwischen Passkey/App-Code und Mailcode */
.trenner { display: flex; align-items: center; gap: 10px; color: var(--grau); font-size: 12px; margin: 18px 0 6px; }
.trenner::before, .trenner::after { content: ''; flex: 1; border-top: 1px solid var(--rand); }
#passkey-knopf { margin-top: 14px; }
.faktor-liste li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #EEF2F6; font-size: 13px; }
.qr { display: block; margin: 12px auto; border: 1px solid var(--rand); border-radius: 8px; }
.geheim { font-family: ui-monospace, monospace; font-size: 12px; word-break: break-all; background: #F2F6FA; padding: 6px 8px; border-radius: 6px; }
.seite.schmal { max-width: 640px; }
.faktor-liste { list-style: none; padding: 0; margin: 0; }
.links { text-align: left !important; }
.abstand { margin-top: 8px; }
select#email { width: 100%; padding: 10px; border: 1px solid var(--rand); border-radius: 8px; font: inherit; }