/* Farbgebung und Grundbausteine aus dem BS_ELO_Importer uebernommen, damit die
   Anwendungen der Familie als eine erkennbar sind: dunkle Kopfleiste, Teal als Akzent,
   weiche Karten auf hellgrauem Grund. Ergaenzt um die Bausteine, die es dort nicht gibt
   (Auftragslisten, Bereichsreiter, ausklappbare Einstellungsgruppen). */

:root {
  --brand-dark: #292f33;
  --brand-teal: #007b85;
  --brand-teal-dark: #00626a;
  --brand-teal-light: #e3f0f1;
  --page-bg: #f4f6f8;
  --text-body: #29303d;
  --text-muted: #6b7280;
  --border-color: #dbe1e8;
  --danger: #c0392b;
  --success: #157347;
  --warning-bg: #fff4e0;
  --warning-border: #f0c473;
  --warning-text: #6b4a00;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

body {
  margin-bottom: 60px;
  background-color: var(--page-bg);
  color: var(--text-body);
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.app-footer {
  font-size: 0.8rem;
  border-top: 1px solid var(--border-color);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus, .form-select:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--brand-teal);
}

/* ---------- Kopfleiste ---------- */

.navbar {
  background-color: var(--brand-dark) !important;
  box-shadow: none !important;
  border-bottom: none !important;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff !important;
  font-weight: 600;
}

.nav-tabs-dark {
  align-self: stretch;
  gap: 0.25rem;
}

.nav-tabs-dark .nav-item {
  height: 100%;
  display: flex;
  align-items: center;
}

.navbar .nav-link {
  color: rgba(255, 255, 255, 0.65) !important;
  font-weight: 500;
  padding: 0.85rem 1rem !important;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.navbar .nav-link:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, 0.06);
}

.navbar .nav-link.active {
  color: #fff !important;
  font-weight: 700;
  border-bottom-color: var(--brand-teal);
  background-color: rgba(255, 255, 255, 0.04);
}

.navbar .nav-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.navbar .nav-link-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Angemeldeter Benutzer ganz rechts */
.navbar-user {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.75rem;
}

.navbar-user .btn-logout {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.2rem;
  line-height: 0;
  cursor: pointer;
}

.navbar-user .btn-logout:hover { color: #fff; }
.navbar-user .btn-logout svg { width: 1rem; height: 1rem; }

/* ---------- Grundbausteine ---------- */

h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-body);
  margin-bottom: 1.25rem;
}

.card {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.06);
  overflow: hidden;
}

.card-header {
  background-color: #fff;
  border-bottom: 1px solid var(--border-color);
  padding: 0.9rem 1.25rem;
  font-weight: 600;
  color: var(--text-body);
}

.card-body { padding: 1.25rem; }

label, .form-label, .col-form-label {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.form-control, .form-select {
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  padding: 0.5rem 0.75rem;
}

.form-control:focus, .form-select:focus { border-color: var(--brand-teal); }

.btn-primary {
  background-color: var(--brand-teal);
  border-color: var(--brand-teal);
  border-radius: 0.5rem;
  font-weight: 600;
  padding: 0.55rem 1.4rem;
}

.btn-primary:hover, .btn-primary:active {
  background-color: var(--brand-teal-dark) !important;
  border-color: var(--brand-teal-dark) !important;
}

.btn-secondary {
  background-color: var(--brand-teal);
  border-color: var(--brand-teal);
  border-radius: 0.5rem;
  font-weight: 600;
}

.btn-secondary:hover {
  background-color: var(--brand-teal-dark);
  border-color: var(--brand-teal-dark);
}

.btn-outline-teal {
  border: 1px solid var(--brand-teal);
  color: var(--brand-teal);
  background: transparent;
  border-radius: 0.5rem;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
}

.btn-outline-teal:hover {
  background-color: var(--brand-teal-light);
  color: var(--brand-teal-dark);
}

.btn-outline-danger, .btn-outline-secondary { border-radius: 0.5rem; }

.alert-success {
  border-radius: 0.65rem;
  border: none;
  background-color: var(--brand-teal-light);
  color: var(--brand-teal-dark);
}

.alert-update {
  background-color: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  border-radius: 0.65rem;
  padding: 0.75rem 1.1rem;
  margin-bottom: 1rem;
}

/* Auftraege mit Fehlern - bewusst kraeftiger als der Update-Hinweis: Hier haengt echte
   Arbeit fest, die sonst niemand bemerkt. */
.alert-review {
  background-color: #fdecec;
  border: 1px solid #e0a3a3;
  color: #7a1f1f;
  border-radius: 0.65rem;
  padding: 0.75rem 1.1rem;
  margin-bottom: 1rem;
}

.alert-review .review-row { margin-top: 0.5rem; }

.alert-review .review-count {
  display: inline-block;
  min-width: 1.9rem;
  padding: 0.05rem 0.45rem;
  margin-right: 0.5rem;
  border-radius: 0.5rem;
  background-color: var(--danger);
  color: #fff;
  font-weight: 600;
  text-align: center;
}

/* ---------- Steuerung des Auftragsdienstes ---------- */

.btn-service {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}

.btn-service.is-stopped { background-color: var(--brand-teal); }
.btn-service.is-stopped:hover { background-color: var(--brand-teal-dark); }
.btn-service.is-running { background-color: var(--danger); }
.btn-service.is-running:hover { background-color: #a5311f; }

.status-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.status-value {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.badge-running, .badge-stopped {
  display: inline-block;
  border-radius: 0.4rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
}

.badge-running { background-color: var(--brand-teal-light); color: var(--brand-teal-dark); }
.badge-stopped { background-color: #eceff1; color: var(--text-muted); }

.uptime-clock {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* ---------- Auftragsliste ---------- */

.job-list { display: flex; flex-direction: column; gap: 0.75rem; }

.job-item {
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--border-color);
  border-radius: 0.65rem;
  padding: 0.9rem 1.1rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.job-item:hover { box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08); }

.job-item.is-active { border-left-color: var(--brand-teal); }
.job-item.is-paused { border-left-color: #cbd2d9; opacity: 0.75; }
.job-item.is-error { border-left-color: var(--danger); }
.job-item.is-running { border-left-color: var(--brand-teal); background-color: #fbfdfd; }

.job-item-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.job-name {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text-body);
  text-decoration: none;
}

.job-name:hover { color: var(--brand-teal-dark); }

.job-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 0.35rem;
  padding: 0.12rem 0.45rem;
  background-color: var(--brand-teal-light);
  color: var(--brand-teal-dark);
  white-space: nowrap;
}

.job-badge.is-muted { background-color: #eceff1; color: var(--text-muted); }
.job-badge.is-print { background-color: #efe6fa; color: #5b3a91; }
.job-badge.is-error { background-color: #fdecec; color: #7a1f1f; }

/* Quelle -> Ziel in einer Zeile, wie in der Profiluebersicht von Syncovery */
.job-path {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  word-break: break-all;
}

.job-path .path-arrow { color: var(--brand-teal); font-weight: 700; flex: none; }
.job-path .path-part { font-family: "Cascadia Code", Consolas, monospace; font-size: 0.8rem; }

.job-meta {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.job-meta strong { color: var(--text-body); font-weight: 600; }
.job-result-ok { color: var(--success); }
.job-result-fail { color: var(--danger); font-weight: 600; }

.job-actions { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; }

.btn-icon {
  border: 1px solid var(--border-color);
  background-color: #fff;
  border-radius: 0.5rem;
  padding: 0.35rem 0.5rem;
  line-height: 0;
  color: var(--text-muted);
  cursor: pointer;
}

.btn-icon:hover { border-color: var(--brand-teal); color: var(--brand-teal); }
.btn-icon svg { width: 1rem; height: 1rem; }
.btn-icon.is-danger:hover { border-color: var(--danger); color: var(--danger); }

/* Laufender Auftrag: dezenter Balken statt Fortschrittswert - wie lange es dauert, weiss
   niemand im Voraus, eine Prozentzahl waere geraten. */
.job-running-bar {
  height: 3px;
  border-radius: 2px;
  margin-top: 0.6rem;
  background: linear-gradient(90deg, var(--brand-teal-light) 25%, var(--brand-teal) 50%, var(--brand-teal-light) 75%);
  background-size: 200% 100%;
  animation: job-running 1.4s linear infinite;
}

@keyframes job-running {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* ---------- Aktivitaeten-Ticker ---------- */

.activity-ticker {
  max-height: 17rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-radius: 0.65rem;
  border: 1px solid var(--border-color);
  background-color: #fbfcfd;
}

.activity-row {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.88rem;
}

.activity-row:last-child { border-bottom: none; }
.activity-row.is-latest { background-color: var(--brand-teal-light); }
.activity-row.is-new { animation: activity-fade-in 0.35s ease-out; }

.activity-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--border-color);
  margin-top: 0.3rem;
}

.activity-row.is-latest .activity-dot {
  background-color: var(--brand-teal);
  box-shadow: 0 0 0 3px var(--brand-teal-light);
}

.activity-time {
  flex: none;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.8rem;
}

.activity-message { color: var(--text-body); word-break: break-word; }
.activity-row.is-latest .activity-message { font-weight: 600; color: var(--brand-teal-dark); }

@keyframes activity-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Tagesuebersicht ---------- */

.today-stats-total { color: var(--text-muted); font-size: 0.9rem; }

.today-stats-grid { display: flex; flex-wrap: wrap; gap: 1rem; }

.today-stats-tile {
  flex: 1 1 18rem;
  min-width: 16rem;
  border: 1px solid var(--border-color);
  border-radius: 0.65rem;
  padding: 1rem;
  background-color: #fbfcfd;
}

.today-stats-tile-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  color: var(--brand-teal-dark);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.today-stats-tile-total {
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  font-weight: 600;
}

.today-stats-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 0.35rem 0;
}

.today-stats-row {
  display: grid;
  grid-template-columns: minmax(6rem, 1fr) minmax(4rem, 8rem) 2rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0;
}

.today-stats-label {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.today-stats-bar-track {
  height: 0.85rem;
  border-radius: 999px;
  background-color: var(--brand-teal-light);
  overflow: hidden;
}

.today-stats-bar-fill {
  height: 100%;
  width: 0%;
  min-width: 2px;
  background-color: var(--brand-teal);
  border-radius: 999px;
  transition: width 0.5s ease;
}

.today-stats-count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--brand-teal-dark);
}

@media (max-width: 576px) {
  .today-stats-row { grid-template-columns: 1fr; row-gap: 0.25rem; }
  .today-stats-count { text-align: left; }
}

/* ---------- Ausklappbare Einstellungsgruppen ---------- */

.gruppen { display: flex; flex-direction: column; gap: 0.75rem; }

.gruppe {
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  overflow: hidden;
}

.gruppe > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.9rem 1.25rem;
  font-weight: 600;
  color: var(--text-body);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  user-select: none;
}

.gruppe > summary::-webkit-details-marker { display: none; }

.gruppe > summary:hover { background-color: #fafbfc; }

.gruppe[open] > summary { border-bottom: 1px solid var(--border-color); }

/* Aufklapp-Pfeil - dreht sich beim Oeffnen */
.gruppe > summary::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--brand-teal);
  border-bottom: 2px solid var(--brand-teal);
  transform: rotate(-45deg);
  transition: transform 0.15s ease-in-out;
  margin-left: 0.15rem;
}

.gruppe[open] > summary::before { transform: rotate(45deg); }

.gruppe-hinweis {
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-left: auto;
  text-align: right;
}

.gruppe-inhalt { padding: 1.25rem; }

.feld-hinweis {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* ---------- Anmeldung ---------- */

.anmeldung {
  max-width: 34rem;
  margin: 0 auto;
  padding: 8rem 1rem 3rem;
  position: relative;
}

.anmeldung-logo {
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  background-color: #fff;
  padding: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.anmeldung-karte {
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
  padding: 8rem 3rem 2rem;
  text-align: center;
}

.anmeldung-banner { max-width: 260px; width: 100%; margin-bottom: 1.5rem; }

.anmeldung .input-group-text {
  background-color: #e9ecef;
  min-width: 3rem;
  justify-content: center;
}

.anmeldung .form-control { background-color: #eef4fb; }

/* ---------- Sonstiges ---------- */

.test-result-ok { color: var(--success); font-weight: 500; }
.test-result-fail { color: var(--danger); font-weight: 500; }

/* Immer sichtbarer Speichern-Knopf oben rechts, damit man auf langen Formularen nicht
   bis ans Seitenende scrollen muss. */
.btn-save-floating {
  position: fixed;
  top: 5.5rem;
  right: 1.5rem;
  z-index: 1000;
  background-color: var(--brand-teal);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-weight: 600;
  padding: 0.6rem 1.3rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.btn-save-floating:hover { background-color: var(--brand-teal-dark); }

.log-viewer {
  background-color: #1c2129;
  color: #d7dee5;
  border-radius: 0.65rem;
  padding: 1rem;
  max-height: 65vh;
  overflow-y: auto;
  font-family: "Cascadia Code", Consolas, monospace;
  font-size: 0.85rem;
  white-space: pre-wrap;
}

/* Zeilen, in denen nichts passiert ist - im Protokoll ausblendbar, damit die echten
   Meldungen sichtbar bleiben. */
.log-viewer.hide-noop .log-line-noop { display: none; }

/* Platzhalter-Hinweis unter Pfadfeldern */
.platzhalter-hilfe {
  font-size: 0.78rem;
  color: var(--text-muted);
  background-color: #fbfcfd;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  margin-top: 0.5rem;
}

.platzhalter-hilfe code {
  color: var(--brand-teal-dark);
  background-color: var(--brand-teal-light);
  border-radius: 0.25rem;
  padding: 0.05rem 0.25rem;
}

/* Zielzeilen im Auftragsformular */
.ziel-zeile {
  background-color: var(--brand-teal-light);
  border: 1px solid var(--border-color);
  border-radius: 0.65rem;
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.leer-hinweis {
  text-align: center;
  color: var(--text-muted);
  padding: 2.5rem 1rem;
}

.leer-hinweis svg {
  width: 3rem;
  height: 3rem;
  opacity: 0.35;
  margin-bottom: 0.75rem;
}

/* ---------- Wartende Dateien: Punkt mit Zahl ---------- */
/* Übernommen aus dem BS_ELO_Importer (hotfolder-badge). Der Punkt sitzt neben dem
   Auftragsnamen und beantwortet die häufigste Frage im Betrieb auf einen Blick:
   liegt etwas an? */

.wartend-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding: 0 0.4rem;
  margin-left: 0.4rem;
  border-radius: 999px;
  background-color: var(--brand-teal);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* Nichts zu tun - gedämpft, damit die Null nicht wie eine Meldung wirkt. */
.wartend-badge.is-zero {
  background-color: #eceff1;
  color: var(--text-muted);
}

/* Nicht ermittelbar (Quelle nicht erreichbar, Auftrag angehalten, Postfach). Bewusst
   anders als eine echte Null: Ein leerer Ordner und ein ausgefallenes Netzlaufwerk
   dürfen nicht gleich aussehen. */
.wartend-badge.is-unbekannt {
  background-color: transparent;
  border: 1px dashed var(--border-color);
  color: var(--text-muted);
  font-weight: 400;
}

/* Viel Rückstau - fällt auf, ohne zu alarmieren. */
.wartend-badge.is-viel {
  background-color: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
}

/* =====================================================================
   BS-SENTINEL: Ampel, Waechterliste, Vorfaelle

   Die Farben sind bewusst kraeftig und nur DREI: gruen, gelb, rot. Ein
   Lagebild mit sieben Abstufungen liest im Ernstfall niemand mehr.
   ===================================================================== */

.ampel {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  flex: none;
}

.ampel-gruen     { background-color: #1f9254; }
.ampel-warnung   { background-color: #e8a33d; }
.ampel-stoerung  { background-color: #c0392b; }
.ampel-unbekannt { background-color: #b3bcc5; }

/* Grosse Sammelampel im Kopf des Lagebildes. */
.lage-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-color);
  background-color: #fff;
}

.lage-kopf .ampel { width: 1.6rem; height: 1.6rem; }
.lage-kopf-text { font-size: 1.15rem; font-weight: 600; }

.lage-kopf.ist-gruen    { border-left: 5px solid #1f9254; }
.lage-kopf.ist-warnung  { border-left: 5px solid #e8a33d; background-color: #fffaf0; }
.lage-kopf.ist-stoerung { border-left: 5px solid #c0392b; background-color: #fdecec; }
.lage-kopf.ist-unbekannt{ border-left: 5px solid #b3bcc5; }

/* Ein Waechter in der Liste. */
.punkt {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border-color);
  border-left: 4px solid #cbd2d9;
  border-radius: 0.35rem;
  background-color: #fff;
  margin-bottom: 0.4rem;
}

.punkt.ist-gruen    { border-left-color: #1f9254; }
.punkt.ist-warnung  { border-left-color: #e8a33d; background-color: #fffaf0; }
.punkt.ist-stoerung { border-left-color: #c0392b; background-color: #fdecec; }
.punkt.ist-aus     { opacity: 0.55; }

.punkt-name { font-weight: 600; }
.punkt-zeile { flex: 1 1 auto; min-width: 0; }
.punkt-text { font-size: 0.85rem; color: var(--text-muted); }

/* Ein offener Vorfall. */
.vorfall {
  border: 1px solid #e0a3a3;
  border-left: 5px solid #c0392b;
  border-radius: 0.35rem;
  background-color: #fdecec;
  padding: 0.45rem 0.75rem;
  margin-bottom: 0.35rem;
}

/* Ein quittierter Vorfall ist einer, um den sich schon jemand kuemmert. Er bleibt
   sichtbar - behoben ist er ja nicht -, tritt aber zurueck: kleinere Schrift, und die
   Quittierung steht als Halbsatz rechts statt als eigener Absatz. */
.vorfall.ist-quittiert {
  border-color: var(--border-color);
  border-left-color: #e8a33d;
  background-color: #fffaf0;
  font-size: 0.9rem;
}

.vorfall-kopf { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.vorfall-name { font-weight: 600; }
.vorfall-zeit { font-size: 0.82rem; color: var(--text-muted); }
.vorfall-text { margin-top: 0.15rem; }

/* Knopf und Quittierungsvermerk stehen rechts aussen in DERSELBEN Zeile wie der Name -
   das spart je Vorfall eine ganze Zeile. */
.vorfall-tat { margin-left: auto; }

/* Der Sprung zu den Vorfaellen weiter unten. Bewusst unauffaellig: Er gehoert in die
   Zaehlzeile, nicht in die Schlagzeile. */
.lage-kopf-sprung { color: inherit; text-decoration: underline dotted; }
.lage-kopf-sprung:hover { color: inherit; text-decoration: underline; }
.vorfall-hinweis {
  margin-top: 0.4rem;
  font-size: 0.88rem;
  border-left: 3px solid var(--brand-teal);
  padding-left: 0.6rem;
}

.gruppentitel {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 1.1rem 0 0.4rem;
}

.einheit-hinweis { font-size: 0.82rem; color: var(--text-muted); }

/* Dezente Fassung einer Aufklapp-Gruppe.
   Fuer Formulare, die im Alltag nicht gebraucht werden: Einen Standort legt man ein
   paarmal im Jahr an, die Liste der vorhandenen sieht man taeglich an. Geschlossen tritt
   die Gruppe deshalb ganz zurueck - geoeffnet ist sie eine normale Karte, weil dann
   tatsaechlich darin gearbeitet wird. */
.gruppe.dezent:not([open]) {
  background-color: transparent;
  border-color: transparent;
}

.gruppe.dezent:not([open]) > summary {
  padding: 0.3rem 0.25rem;
  font-weight: 400;
  font-size: 0.87rem;
  color: var(--text-muted);
}

.gruppe.dezent:not([open]) > summary::before {
  border-right-color: var(--text-muted);
  border-bottom-color: var(--text-muted);
  width: 0.4rem;
  height: 0.4rem;
}

.gruppe.dezent:not([open]) > summary:hover {
  background-color: transparent;
  color: var(--text-body);
}

/* Schwebender Speicherknopf.
   Die Einstellungsseiten sind lang; wer unten etwas aendert, musste bisher bis ans Ende
   scrollen, um zu speichern - und wer es vergisst, merkt es erst, wenn die Aenderung
   nicht wirkt. Der Knopf bleibt deshalb oben rechts stehen.
   Die Leiste selbst nimmt keine Klicks an (pointer-events), sonst laege ein unsichtbarer
   Streifen ueber der Seite und verschluckte Klicks auf die Felder darunter. */
.speicherleiste {
  position: sticky;
  top: 0.75rem;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  margin-bottom: -2.6rem;
}

.speicherleiste > * {
  pointer-events: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

/* Auf schmalen Bildschirmen steht er nicht ueber dem Inhalt, sondern normal im Fluss -
   dort ist die Breite zu knapp, als dass er nicht etwas verdecken wuerde. */
@media (max-width: 575.98px) {
  .speicherleiste { position: static; margin-bottom: 0.75rem; }
}

/* ============================================================================
   Lagebild: Standort → Gerät → Wächter

   Der Aufbau folgt der Frage, die nachts um drei zuerst gestellt wird: "Wo brennt
   es?" - und erst danach "was genau". Deshalb ist jeder Standort ein Register:
   ruhige Standorte sind zugeklappt und kosten keinen Platz, ein Standort mit
   Störung ist AUFGEKLAPPT (siehe Index.cshtml). Ein Register, das einen Alarm
   verbirgt, wäre die schlimmste Ausführung dieser Idee.
   ============================================================================ */

.standort-register {
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
  background-color: #fff;
}

.standort-register > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  user-select: none;
  font-weight: 600;
}

.standort-register > summary::-webkit-details-marker { display: none; }

.standort-register > summary::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease-in-out;
}

.standort-register[open] > summary::before { transform: rotate(45deg); }

/* Die Zusammenfassung rechts: Anzahl und Kurzbefund. Sie ist der Grund, warum ein
   zugeklappter Standort trotzdem etwas aussagt. */
.standort-zahlen {
  margin-left: auto;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: right;
}

.standort-inhalt { padding: 0 0.75rem 0.75rem; }

/* --- Gerät als farbige Fläche --- */

.geraet {
  border-radius: 0.6rem;
  padding: 0.6rem 0.8rem;
  margin-top: 0.6rem;
  border: 1px solid transparent;
}

.geraet.ist-gruen     { background-color: #eefaf1; border-color: #cdeed8; }
.geraet.ist-warnung   { background-color: #fef8e7; border-color: #f6e6b4; }
.geraet.ist-stoerung  { background-color: #fdeeee; border-color: #f5cfcf; }
.geraet.ist-unbekannt { background-color: #f3f4f6; border-color: #e3e5e8; }
.geraet.ist-aus       { opacity: 0.55; }

.geraet-kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.geraet-name { font-weight: 600; }

.geraet-art {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #46525f;
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.3rem;
  padding: 0.05rem 0.4rem;
}

.geraet-adresse { font-size: 0.85rem; color: var(--text-muted); }

/* --- Wächterzeilen im Gerät --- */

.waechter-zeile {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.28rem 0 0.28rem 0.2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.9rem;
}

.waechter-zeile:first-of-type { border-top: 1px solid rgba(0, 0, 0, 0.09); margin-top: 0.5rem; }

.waechter-name { min-width: 12rem; }
.waechter-name a { color: inherit; text-decoration: none; }
.waechter-name a:hover { text-decoration: underline; }

.waechter-wert { flex: 1; color: #46525f; }
.waechter-zeit { color: var(--text-muted); font-size: 0.82rem; white-space: nowrap; }

/* Der kleine Punkt vor jeder Wächterzeile - kleiner als die Standort-Ampel, damit
   die Blickführung von grob nach fein geht. */
.punkt-klein {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  display: inline-block;
}

.punkt-klein.ist-gruen     { background-color: #1f9d55; }
.punkt-klein.ist-warnung   { background-color: #d9a406; }
.punkt-klein.ist-stoerung  { background-color: #d64545; }
.punkt-klein.ist-unbekannt { background-color: #9aa5b1; }

/* --- Wie weit ist ein Gerät eingerichtet? ---

   Gerät angelegt → Melder eingerichtet → Melder meldet sich → Wächter aktiv.

   Die Kette wird NUR angezeigt, solange etwas fehlt. Ein Fortschritt, der dauerhaft
   "fertig" meldet, ist nach einer Woche nur noch Rauschen - und Rauschen ist auf
   einem Lagebild teurer als anderswo: Es senkt die Aufmerksamkeit für das, was
   wirklich blinkt. */
.einrichtung {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

.einrichtung-stufe {
  flex: 1 1 7rem;
  min-width: 7rem;
}

.einrichtung-balken {
  display: block;
  height: 0.28rem;
  border-radius: 0.15rem;
  background-color: rgba(0, 0, 0, 0.12);
}

.einrichtung-stufe.erfuellt .einrichtung-balken { background-color: #1f9d55; }

.einrichtung-text {
  display: block;
  font-size: 0.72rem;
  margin-top: 0.2rem;
  color: var(--text-muted);
}

.einrichtung-stufe.erfuellt .einrichtung-text { color: #46525f; }

/* Trenner zwischen den drei Menuegruppen: "was ist los", "was wird ueberwacht",
   "woraufhin und fuer wen". Ein duenner Strich statt eines zweiten Menues - die
   Gruppen sollen erkennbar sein, ohne dass jemand erst irgendwo hineinklicken muss. */
.nav-trenner {
  align-self: center;
  width: 1px;
  height: 1.4rem;
  margin: 0 0.5rem;
  background-color: rgba(255, 255, 255, 0.22);
}

@media (max-width: 575.98px) {
  /* Im zusammengeklappten Menue steht alles untereinander; ein senkrechter Strich
     ergaebe dort keinen Sinn. */
  .nav-trenner { width: 100%; height: 1px; margin: 0.35rem 0; }
}

/* --- Woher kommt die Messung? ---

   Die wichtigste unsichtbare Eigenschaft eines Waechters: Wird er VOM MELDER im Haus
   gemessen (ausgehend, kein Port offen) oder VON DER ZENTRALE ueber das Netz
   (eingehend, das Ziel muss von aussen erreichbar sein)?

   Daran scheitern Einrichtungen: Ein Waechter auf den ELO-Indexserver, von der
   Zentrale aus gemessen, kann nie gruen werden - die Maschine ist von aussen gar
   nicht erreichbar. Der Pfeil macht die Richtung sichtbar, bevor jemand eine Stunde
   sucht. */
.messweg {
  flex: none;
  font-size: 0.72rem;
  border-radius: 0.3rem;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Aus dem Haus hinaus: Der Melder ruft die Zentrale. */
.messweg-melder {
  color: #0f5a63;
  background-color: rgba(0, 145, 157, 0.12);
  border-color: rgba(0, 145, 157, 0.28);
}

/* Von der Zentrale ins Netz: Sie ruft das Ziel. */
.messweg-zentrale {
  color: #46525f;
  background-color: rgba(70, 82, 95, 0.09);
  border-color: rgba(70, 82, 95, 0.2);
}

/* Am Geraet: der Melder und seine Verbindung. */
.melderweg {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  border-radius: 0.3rem;
  padding: 0.08rem 0.45rem;
}

.melderweg.meldet {
  color: #14532d;
  background-color: rgba(31, 157, 85, 0.14);
  border: 1px solid rgba(31, 157, 85, 0.3);
}

.melderweg.schweigt {
  color: #7f1d1d;
  background-color: rgba(214, 69, 69, 0.13);
  border: 1px solid rgba(214, 69, 69, 0.32);
}

.melderweg.fehlt {
  color: var(--text-muted);
  background-color: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Die kleine Verlaufskurve in der Waechterzeile. Sie soll die Zeile nicht hoeher
   machen - deshalb feste Hoehe und Ausrichtung an der Grundlinie. */
.waechter-kurve {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 1.1rem;
  opacity: 0.85;
}

.waechter-kurve svg { display: block; }

/* Vorgeschlagene Messwerte einer Zielseite.
   Die Umgebung ist absichtlich einzeilig abgeschnitten: Sie soll das Wiedererkennen
   ermoeglichen, nicht den Quelltext abdrucken. */
.vorschlaege {
  border: 1px solid var(--border-color);
  border-radius: 0.35rem;
  background-color: #f7f9fa;
  padding: 0.6rem 0.75rem;
}

.vorschlaege-kopf {
  font-size: 0.88rem;
  margin-bottom: 0.4rem;
}

.vorschlag-umgebung {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--text-muted);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vorschlag-muster {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.78rem;
  color: #0b6b73;
  overflow-wrap: anywhere;
}

.vorschlaege tr.ist-gewaehlt { background-color: #e6f4f1; }

/* Der aktuelle Stand eines Waechters in seiner Zeile.
   Kein Aufklappen und kein zweiter Klick: Die Frage "was ist damit gerade" stellt sich
   bei jeder Zeile, und sie zweimal zu beantworten kostet weniger Platz als ein Knopf. */
.punkt-status {
  font-size: 0.85rem;
  margin-top: 0.1rem;
}

.punkt-pausiert {
  display: inline-block;
  border-radius: 0.35rem;
  padding: 0.02rem 0.4rem;
  background-color: #eceff1;
  color: var(--text-muted);
  font-weight: 600;
}

/* Seitenkopf mit Titel links und einer zurueckhaltenden Handlung rechts. */
.seiten-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* ---------- Standort und Geraet als Gliederung einer Liste ----------
   Beide waren vorher grauer Kleintext und dadurch nicht zu unterscheiden. Das Zeichen
   traegt die Ebene, nicht die Schriftgroesse - so ist die Gliederung auch dann noch zu
   sehen, wenn die Liste lang ist und man nur ueberfliegt. */

.standort-titel {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 1.4rem 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-body);
}

.standort-titel svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--brand-teal);
  flex: none;
}

.standort-titel-name {
  font-weight: 700;
  font-size: 1.02rem;
}

.standort-titel-zahl {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.standort-leer {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem 1.35rem;
}

.geraet-titel {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.7rem 0 0.3rem 1.35rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-body);
}

.geraet-titel svg {
  width: 0.85rem;
  height: 0.85rem;
  color: var(--text-muted);
  flex: none;
}

.geraet-titel-host {
  font-weight: 400;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.8rem;
}

/* Die Spanne der letzten 24 Stunden neben der kleinen Kurve. Tabellenziffern, damit die
   Zahlen in untereinanderstehenden Zeilen nicht wandern. */
.waechter-spanne {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Fortschritt bis zur naechsten Messung. Bewusst duenn und blass: Die Auskunft ist
   nuetzlich, aber nie das Wichtigste in der Zeile - das bleibt der Zustand. */
.takt-balken {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.35rem;
  max-width: 26rem;
}

/* Die Bahn, in der der Balken laeuft. Ein eigenes Element statt eines abgesetzten
   Pseudoelements: Das braucht keine absolute Positionierung und rutscht damit auch dann
   nicht, wenn die Zeile umbricht. */
.takt-bahn {
  width: 14rem;
  height: 3px;
  border-radius: 2px;
  background-color: var(--border-color);
  overflow: hidden;
  flex: none;
}

.takt-bahn > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background-color: var(--brand-teal);
  opacity: 0.55;
  transition: width 0.9s linear;
}

.takt-balken > em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Die Marke einer Messgruppe. */
.gruppen-marke {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.02rem 0.4rem;
  border-radius: 0.35rem;
  background-color: var(--brand-teal-light);
  color: var(--brand-teal-dark);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Zeichen fuer Standort und Geraet. Sie ersetzen die farbigen Punkte: Ein Punkt sagt nur
   "gut" oder "schlecht", das Zeichen sagt zusaetzlich, WORUEBER geredet wird. Die Farbe
   geht dabei nicht verloren - sie steckt jetzt im Zeichen. */
.zeichen {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

.zeichen-gruen     { color: #1f9254; }
.zeichen-warnung   { color: #e8a33d; }
.zeichen-stoerung  { color: #c0392b; }
.zeichen-unbekannt { color: #b3bcc5; }

/* Am Geraet etwas kleiner: Es steht eine Ebene tiefer, und das soll man sehen, ohne die
   Einrueckung nachzumessen. */
.geraet-kopf .zeichen { width: 0.9rem; height: 0.9rem; }

/* Die kleine Kurve ist anklickbar - das soll man sehen, ohne dass sie wie ein Knopf
   aussieht. */
a.waechter-kurve { display: inline-block; border-radius: 0.25rem; }
a.waechter-kurve:hover { background-color: var(--brand-teal-light); }

/* Die grossen Kurven auf der Geraeteseite. Sie duerfen breiter sein als der Text und
   scrollen auf schmalen Bildschirmen waagerecht, statt gequetscht zu werden. */
.verlauf-gross { overflow-x: auto; }
.verlauf-gross svg { min-width: 40rem; }

/* Ein Melder ohne Auftrag. Bewusst grau und nicht rot: Er ist still, aber das ist kein
   Fehler - er hat schlicht nichts zu tun. Rot waere hier ein Fehlalarm in Textform. */
.melderweg.ruht {
  background-color: #eceff1;
  color: var(--text-muted);
  border-color: var(--border-color);
}

/* Woher ein Vorfall kommt: Standort und Geraet.
   Vorher Bootstraps "text-bg-secondary" - das setzt weisse Schrift und verlaesst sich
   fuer den Hintergrund auf eine Bootstrap-Variable, die hier nicht durchschlug. Uebrig
   blieb weisse Schrift auf hellem Grund, also praktisch unlesbar. Eigene, festgelegte
   Farben statt einer Abhaengigkeit, die still ausfallen kann. */
.vorfall-ort {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 0.35rem;
  background-color: var(--brand-teal-light);
  color: var(--brand-teal-dark);
  border: 1px solid #cfe3e4;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- BS-INVOICE: Mandantenumschalter und Kennzahlen ---------- */

/* Der Umschalter steht in der dunklen Kopfleiste neben der Marke. Er ist kein
   Nebenschauplatz: Er entscheidet, in welche Datenbank geschrieben wird. */
.navbar-mandant { margin-right: auto; }

.btn-mandant {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.35rem 0.75rem;
  border-radius: 0.4rem;
}

.btn-mandant:hover, .btn-mandant:focus {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* Der Zustand steht nur dann am Umschalter, wenn er den Betrieb einschraenkt -
   "Aktiv" muss niemand lesen. */
.mandant-zustand {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--warning-bg);
  color: var(--warning-text);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.navbar-mandant .dropdown-item small { margin-left: 0.4rem; color: var(--text-muted); }

.kennzahl {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--brand-teal);
}

.kennzahl-text {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Logo des Mandanten in den Einstellungen: derselbe Rahmen wie auf dem Beleg
   (56,2 x 38,4 mm), damit man vor dem Druck sieht, wie es dort sitzt. */
.logo-vorschau {
  max-width: 100%;
  max-height: 9rem;
  object-fit: contain;
}

.logo-leer {
  border: 1px dashed var(--border-color);
  border-radius: 0.4rem;
  padding: 2.5rem 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ---------- Seitenkopf: Titel links, Handlungen rechts ---------- */

/* Ueberall dieselbe Stelle fuer den Knopf, der etwas Neues anlegt - oben rechts,
   wie in sevdesk. Wer eine Liste oeffnet, sucht ihn nicht erst am Seitenende.
   Das Anlegen selbst steckt in einem Unterformular, damit die Liste die Seite
   behaelt und nicht unter einem Formular verschwindet. */
.seitenkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.seitenkopf h1 { margin-bottom: 0; }

.seitenkopf-knoepfe {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

/* Das Unterformular selbst: etwas breiter als die Bootstrap-Vorgabe, weil die
   Anschriftszeile sonst dreifach umbricht. */
.formular-dialog .modal-dialog { max-width: 46rem; }

/* ---------- Eingang ---------- */

.zeile-klickbar { cursor: pointer; }

.kennzahl-warnung { color: var(--danger); }

/* Der lange Leistungstext einer Position steht so da, wie er im XML stand - mit
   seinen Zeilenumbruechen. Bei Bauleistungen ist er der eigentliche Inhalt der
   Rechnung und nicht ein Beiwerk, das man auf eine Zeile kuerzt. */
.leistungstext {
  white-space: pre-wrap;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
  max-width: 42rem;
}

/* Eine Pruefsumme wird verglichen, nicht gelesen: umbrechen statt die Spalte sprengen. */
.pruefsumme {
  font-size: 0.7rem;
  word-break: break-all;
  line-height: 1.3;
}

/* ---------- Offene Posten ---------- */

/* Die Faelligkeitsampel. Vier Stufen wie in BS-FIBU: bis zur Faelligkeit gruen,
   danach in Schritten von zwei und vier Wochen. Ein Punkt und keine Zahl - die
   Zahl steht daneben, der Punkt ist fuer den Blick ueber die Liste. */
.ampel {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
}

.ampel-gruen { background: var(--success); }
.ampel-gelb { background: #e6b800; }
.ampel-orange { background: #e07b00; }
.ampel-rot { background: var(--danger); }

.belegverweis {
  display: inline-block;
  margin-right: 0.4rem;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.8rem;
}

/* --- Texterkennung auf der Buchungsseite --- */

/* Das Feld, das den naechsten Klick aufnimmt: hellgelb, damit man es nicht suchen muss. */
.ocr-ziel { background-color: #fff9c4 !important; border-color: #e6c200 !important; }
.ocr-uebernommen { background-color: #d4edda !important; transition: background-color .4s; }
.ocr-abgelehnt { background-color: #f8d7da !important; transition: background-color .5s; }

.ocr-seite { position: relative; margin-bottom: 1rem; border: 1px solid #dbe1e8; background: #fff; }
.ocr-seite img { display: block; width: 100%; height: auto; }

/* Ein Kasten je Wort - unsichtbar, bis die Maus darueber ist. */
.ocr-wort {
    position: absolute; cursor: pointer;
    border: 1px solid transparent; border-radius: 2px;
}
.ocr-wort:hover { border-color: #00898f; background: rgba(0, 137, 143, .18); }
.ocr-unsicher { border-color: rgba(230, 160, 0, .35); border-style: dashed; }