/* einsicht.css — [NEUE-VERSION] (Auftrag 137, Fenster EIU): «Test ansehen». Nur Klassen ein-*.
 * Schutz gilt NUR im Dialog (app-weit würde user-select:none Eingabefelder und Kopierknöpfe stören). */

/* ---------------------------------------------------------------- Knöpfe in Kachel, Testzeile, Admin-Zeile */
.ein-knopf,
.ein-admin__knopf {
  min-height: 48px;
  min-width: 48px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
}
.ein-admin {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
}
.ein-admin__satz,
.ein-admin__meldung {
  font-size: 0.9rem;
  color: #444;
}
.ein-admin__meldung:empty { display: none; }

/* ---------------------------------------------------------------- Dialog: eine Spalte, ganz im Bild */
dialog.ein-dialog {
  box-sizing: border-box;
  width: min(860px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  height: calc(100vh - 16px);
  height: calc(100dvh - 16px);
  max-height: calc(100dvh - 16px);
  margin: auto;
  padding: 0;
  border: 1px solid #c8c8c8;
  border-radius: 10px;
  background: #fff;
  color: #1a1a1a;
  overflow: hidden;
  position: fixed;
  inset: 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
dialog.ein-dialog[open] {
  display: flex;
  flex-direction: column;
}
dialog.ein-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
dialog.ein-dialog *,
dialog.ein-dialog *::before,
dialog.ein-dialog *::after {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.ein-flaeche {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

/* Kopf ≤ 64 px: zwei kurze Zeilen links, ✕ 48 px rechts */
.ein-kopf {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-height: 64px;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid #e0e0e0;
  flex: 0 0 auto;
}
.ein-kopf__text { flex: 1 1 auto; min-width: 0; }
.ein-titel {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ein-meta {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.3;
  color: #444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ein-schliessen {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  background: #f5f5f5;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.ein-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 8px 16px;
  flex: 0 0 auto;
}
.ein-filter__knopf {
  min-height: 48px;
  min-width: 48px;
  padding: 0.5rem 1rem;
  border: 2px solid #888;
  border-radius: 24px;
  background: #fff;
  color: #1a1a1a;
  font-size: 1rem;
  cursor: pointer;
}
.ein-filter__knopf[aria-pressed="true"] {
  border-color: #1a4f8b;
  background: #1a4f8b;
  color: #fff;
  font-weight: 600;
}

.ein-liste {
  list-style: none;
  margin: 0;
  padding: 0 16px 16px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  font-size: 1.15rem;
  line-height: 1.45;
}
.ein-aufgabe {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid #d6d6d6;
  border-left-width: 6px;
  border-radius: 8px;
  background: #fff;
  overflow-wrap: anywhere;
}
.ein-aufgabe[hidden], .ein-keine-fehler[hidden] { display: none; }
.ein-aufgabe--richtig { border-left-color: #2e7d32; }
.ein-aufgabe--falsch { border-left-color: #c62828; }
.ein-aufgabe--teilweise { border-left-color: #ef6c00; }
.ein-aufgabe--leer { border-left-color: #757575; }
.ein-aufgabe--wartet { border-left-color: #1565c0; }
.ein-aufgabe__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  font-size: 1.15rem;
}
.ein-nr { font-weight: 700; }
.ein-status { font-weight: 700; }
.ein-status--richtig { color: #1b5e20; }
.ein-status--falsch { color: #b71c1c; }
.ein-status--teilweise { color: #8a4b00; }
.ein-status--leer { color: #424242; }
.ein-status--wartet { color: #0d47a1; }
.ein-punkte { margin-left: auto; color: #333; }
.ein-aufgabe p,
.ein-aufgabe li,
.ein-aufgabe dt,
.ein-aufgabe dd { font-size: 1.15rem; }
.ein-frage { margin: 0.5rem 0 0; font-weight: 600; }
.ein-frage__zusatz { margin: 0.25rem 0 0; }
.ein-optionen { margin: 0.25rem 0 0; padding-left: 1.4rem; }
.ein-teil { margin: 0.6rem 0 0; }
.ein-teil dt { margin: 0.3rem 0 0; font-weight: 600; color: #333; }
.ein-teil dd { margin: 0; padding: 0.15rem 0 0 0.75rem; }
.ein-teil__label { color: #555 !important; }
.ein-leer { font-style: italic; color: #555; }
.ein-richtig-waere { color: #1b5e20 !important; }
.ein-erwartet { font-weight: 600; color: #1b5e20; }
.ein-tipp,
.ein-urteil { margin: 0.6rem 0 0; padding: 0.4rem 0.6rem; border-radius: 6px; background: #f3f6fa; }
.ein-keine-fehler { margin: 16px 0 0; font-size: 1.15rem; }
.ein-fuss {
  margin: 0;
  padding: 8px 16px;
  border-top: 1px solid #e0e0e0;
  font-size: 0.95rem;
  color: #444;
  flex: 0 0 auto;
}
.ein-hinweis {
  margin: 16px;
  font-size: 1.15rem;
}

/* ---------------------------------------------------------------- Wasserzeichen: dicht, hell, diagonal */
.ein-wasserzeichen {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.ein-wasserzeichen__muster {
  position: absolute;
  inset: -50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  transform: rotate(-28deg);
  color: rgba(26, 26, 26, 0.09);
  font-size: 1.1rem;
  font-weight: 700;
  white-space: pre;
  line-height: 1;
}
.ein-wasserzeichen__zeile { text-align: center; }
.ein-wasserzeichen__zeile:nth-child(even) { transform: translateX(-12%); }

/* Seite verborgen (Tab gewechselt, App-Umschalter): Inhalt weg */
dialog.ein-verborgen .ein-liste,
dialog.ein-verborgen .ein-kopf__text { visibility: hidden; }

.ein-druckhinweis { display: none; }

/* ---------------------------------------------------------------- Druck: nur der Hinweis */
@media print {
  body.ein-offen > *:not(.ein-druckhinweis) { display: none !important; }
  dialog.ein-dialog,
  dialog.ein-dialog * { display: none !important; }
  body.ein-offen > .ein-druckhinweis {
    display: block !important;
    margin: 30mm 10mm;
    font-size: 16pt;
    text-align: center;
    color: #000;
  }
}