/* ERC Ausweise – Navy/Weiss, klare Karten-Optik wie die Desktop-App */
:root {
  --navy: #000080;
  --navy-hell: #4646a0;
  --grau-hintergrund: #f2f3f7;
  --rand: #d8dae5;
  --gruen: #1a7f37;
  --rot: #c0392b;
  --gelb-hintergrund: #fff8e1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: var(--grau-hintergrund);
  color: #222;
}

h1 { color: var(--navy); margin: 0.5rem 0 1rem; }
h2 { color: var(--navy); font-size: 1.1rem; margin-top: 0; }
h3 { color: var(--navy-hell); font-size: 0.95rem; }

.hauptnav {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  background: var(--navy);
  color: #fff;
  padding: 0.6rem 1.2rem;
  flex-wrap: wrap;
}
.hauptnav a { color: #fff; text-decoration: none; padding: 0.3rem 0.2rem; }
.hauptnav a:hover { text-decoration: underline; }
.marke { font-weight: 700; letter-spacing: 0.03em; margin-right: 0.8rem; }
.logout-form { margin-left: auto; }

.inhalt { max-width: 1100px; margin: 1.2rem auto; padding: 0 1rem; }

.karte {
  background: #fff;
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 32, 0.06);
}

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.kachel { text-align: center; }
.kachel-zahl { display: block; font-size: 2rem; font-weight: 700; color: var(--navy); }
.kachel-zahl.gruen { color: var(--gruen); }
.kachel-zahl.rot { color: var(--rot); }
.kachel-text { color: #666; font-size: 0.9rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--rand); }
th { color: var(--navy); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; }
.zeile-gesperrt td { color: #999; }
.nowrap { white-space: nowrap; }

.status { padding: 0.15rem 0.5rem; border-radius: 99px; font-size: 0.85rem; font-weight: 600; }
.status-gruen { background: #e6f4ea; color: var(--gruen); }
.status-rot { background: #fdecea; color: var(--rot); }
.status-blau { background: #e8f0fe; color: var(--navy); }

.tabs { display: flex; gap: 0.2rem; flex-wrap: wrap; border-bottom: 2px solid var(--rand); margin-bottom: 1rem; }
.tab {
  padding: 0.45rem 0.9rem;
  color: #555;
  text-decoration: none;
  border-radius: 8px 8px 0 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tab:hover { background: #eef0ff; }
.tab.aktiv { color: var(--navy); font-weight: 600; border-bottom-color: var(--navy); }

.knopf {
  display: inline-block;
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 7px;
  padding: 0.45rem 0.9rem;
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}
.knopf:hover { background: #eef0ff; }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.knopf:disabled:hover { background: #fff; }
.knopf-primaer { background: var(--navy); color: #fff; }
.knopf-primaer:hover { background: #000060; }
.knopf-klein { padding: 0.2rem 0.5rem; font-size: 0.85rem; }
.knopf-schlicht { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.knopf-schlicht:hover { background: rgba(255,255,255,0.12); }
.breit { width: 100%; }

label { display: block; margin-bottom: 0.7rem; font-size: 0.9rem; color: #444; }
input, select, textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  margin-top: 0.25rem;
  border: 1px solid var(--rand);
  border-radius: 7px;
  font-size: 1rem;
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--navy-hell); border-color: var(--navy-hell); }
.kontrollzeile { display: flex; align-items: center; gap: 0.5rem; }
.kontrollzeile input { width: auto; margin: 0; }

.zeile { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.zeile input[type="search"] { max-width: 280px; }
.zeile select { width: auto; }
.werkzeugleiste { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tabellen-aktionen { margin-bottom: 0.8rem; }
.aktionen-zeile { margin-top: 0.4rem; }
.karten-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 800px) { .karten-spalten { grid-template-columns: 1fr; } }

.meldung { padding: 0.6rem 0.9rem; border-radius: 8px; }
.meldung-info { background: #e8f0fe; color: var(--navy); }
.meldung-fehler { background: #fdecea; color: var(--rot); }
.meldung-warnung { background: var(--gelb-hintergrund); color: #8a6d00; }

.login-karte { max-width: 380px; margin: 8vh auto; text-align: center; }
.login-karte .untertitel { color: #666; margin-top: -0.5rem; }
.login-karte form { text-align: left; }

dialog.karte { border: 1px solid var(--rand); max-width: 420px; width: 90%; }
dialog::backdrop { background: rgba(0, 0, 32, 0.4); }

/* Einlass-Pruefung: grossflaechig, mobilfreundlich */
.pruefung { max-width: 480px; margin: 0 auto; text-align: center; }
.pruefung input {
  font-size: 1.4rem;
  text-align: center;
  padding: 0.8rem;
}
.pruef-anzeige {
  margin-top: 1rem;
  border-radius: 14px;
  padding: 2.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pruef-anzeige #ergebnis-status { font-size: 2.4rem; font-weight: 800; }
.pruef-anzeige #ergebnis-name { font-size: 1.4rem; }
.pruef-neutral { background: #e8eaf2; color: #555; }
.pruef-gruen { background: var(--gruen); color: #fff; }
.pruef-rot { background: var(--rot); color: #fff; }

.hinweis { color: #666; font-size: 0.85rem; }

.datei-liste { list-style: none; padding-left: 0.2rem; }
.datei-liste li { padding: 0.15rem 0; font-family: Consolas, monospace; font-size: 0.9rem; }
code { background: #eef0f6; padding: 0.1rem 0.3rem; border-radius: 4px; }