/* Workmate r24: Normalnutzer – ausschließlich Darstellung, keine OCR-/Rechteänderungen.
 * Nach allen bisherigen Stylesheets laden, damit Legacy-Regeln nicht gewinnen.
 */
#app[data-normal-user="1"] {
  width: min(1200px, calc(100% - 32px));
  max-width: 100%;
  margin-inline: auto;
}
#app[data-normal-user="1"] *,
#app[data-normal-user="1"] *::before,
#app[data-normal-user="1"] *::after { box-sizing: border-box; }
#app[data-normal-user="1"] .workspace {
  display: block;
  width: min(1080px, 100%);
  min-width: 0;
  margin-inline: auto;
  padding: clamp(14px, 2.6vw, 32px);
}
#app[data-normal-user="1"] .upload-zone,
#app[data-normal-user="1"] .upload-zone > *,
#app[data-normal-user="1"] #results,
#app[data-normal-user="1"] #results > *,
#app[data-normal-user="1"] .result-card,
#app[data-normal-user="1"] .preview,
#app[data-normal-user="1"] .editor-page,
#app[data-normal-user="1"] .editor-line,
#app[data-normal-user="1"] .editor-text,
#app[data-normal-user="1"] .editor-codes,
#app[data-normal-user="1"] .handwriting-result,
#app[data-normal-user="1"] .handwriting-interactive {
  min-width: 0;
  max-width: 100%;
}

/* Genau drei Ergebnisbereiche, immer nacheinander; keine impliziten Grid-Spalten. */
#app[data-normal-user="1"] #results:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row;
  gap: clamp(15px, 2.3vw, 26px);
  align-items: start;
  width: 100%;
  min-width: 0;
}
#app[data-normal-user="1"] #results[hidden] {display: none !important;}
#app[data-normal-user="1"] #results > .result-card {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(12px, 2vw, 22px);
  overflow: hidden; /* Begrenzung auf Kartengrenzen, kein Bildüberlauf. */
}
/* Reihenfolge kommt aus dem HTML: Originalkorrektur, OCR, korrigierte OCR. */
/* Vorschauquelle ist nur ein unsichtbarer JS-Datenspeicher, keine vierte Karte. */
#app[data-normal-user="1"] #preview-original,
#app[data-normal-user="1"] #results > #preview-original {display: none !important;}

#app[data-normal-user="1"] .card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 14px;
  row-gap: 8px;
  min-width: 0;
}
#app[data-normal-user="1"] .card-heading > div {min-width: 0; flex: 1 1 240px;}
#app[data-normal-user="1"] .card-heading h2 {
  overflow-wrap: anywhere;
  font-size: clamp(16px, 2.3vw, 20px);
  line-height: 1.35;
}
#app[data-normal-user="1"] .download-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 9px;
  white-space: nowrap;
  touch-action: manipulation;
}
#app[data-normal-user="1"] .download-button[hidden] {display: none !important;}
#app[data-normal-user="1"] .result-card > .editor-help {
  min-height: 0;
  height: auto;
  margin: 0 0 12px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* PDF-/Bildvorschauen bleiben innerhalb ihrer Karten; bei langen Seiten lokal scrollen. */
#app[data-normal-user="1"] .result-document-preview,
#app[data-normal-user="1"] .handwriting-document-preview {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: min(82vh, 1100px) !important;
  max-height: min(82dvh, 1100px) !important;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 10px;
  background: #edf3f7;
  scrollbar-gutter: stable;
}
#app[data-normal-user="1"] .result-document-preview img,
#app[data-normal-user="1"] .handwriting-interactive img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  object-position: top center;
}
#app[data-normal-user="1"] .handwriting-result .preview {max-height: min(82dvh, 1100px) !important;}
#app[data-normal-user="1"] .handwriting-interactive {
  position: relative;
  width: 100% !important;
  height: auto;
  line-height: 0;
}
#app[data-normal-user="1"] .handwriting-hotspots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#app[data-normal-user="1"] #handwriting-stats {
  margin-block: 8px 12px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* Interaktiven OCR-Editor ohne herausragende A4-Mindestbreite einpassen. */
#app[data-normal-user="1"] #correction-editor .editor-card-scroll {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: min(78vh, 1000px);
  max-height: min(78dvh, 1000px);
  min-height: 0 !important;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 10px;
  scrollbar-gutter: stable;
}
#app[data-normal-user="1"] #correction-editor #editor-page {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0;
  padding: clamp(13px, 2.7vw, 30px) !important;
  font-size: clamp(11px, 1.4vw, 14px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
#app[data-normal-user="1"] #correction-editor .editor-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(58px, 13%);
  gap: clamp(5px, 1.2vw, 12px);
  min-height: 1.65em;
}
#app[data-normal-user="1"] #correction-editor .editor-text {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
#app[data-normal-user="1"] #correction-editor .editor-codes {
  min-width: 0;
  max-width: 100%;
  font-size: clamp(9px, 1.2vw, 11px);
}
#app[data-normal-user="1"] #correction-editor .editor-code-line {
  max-width: 100%;
  white-space: normal;
  flex-wrap: wrap;
  gap: 2px;
}

/* Uploadfelder und Werkzeuge bleiben auf jeder Breite innerhalb der Spalte. */
#app[data-normal-user="1"] .upload-zone {grid-template-columns: minmax(0,1fr);}
#app[data-normal-user="1"] .drop-field,
#app[data-normal-user="1"] .template-upload,
#app[data-normal-user="1"] #template-dropzone,
#app[data-normal-user="1"] .file-row,
#app[data-normal-user="1"] .privacy-assurance {width: 100%; max-width:100%; min-width:0;}
#app[data-normal-user="1"] .drop-copy {min-width: 0;}
#app[data-normal-user="1"] .drop-copy strong,
#app[data-normal-user="1"] .drop-copy small,
#app[data-normal-user="1"] #template-upload small {overflow-wrap:anywhere;}
#app[data-normal-user="1"] .upload-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
}
#app[data-normal-user="1"] .upload-actions .status,
#app[data-normal-user="1"] .upload-actions .start-button {
  grid-column: auto;
  min-width: 0;
  max-width: 100%;
  margin-inline: auto;
}
#app[data-normal-user="1"] .upload-actions .start-button {
  min-height: 46px;
  min-width: min(100%, 270px);
}
#app[data-normal-user="1"] .privacy-assurance input {margin-top: 2px;}
#app[data-normal-user="1"] .privacy-row {flex-wrap:wrap;gap:10px 18px;}

/* Dialog am Gerät halten, auch wenn er am rechten Seitenrand angetippt wurde. */
#app[data-normal-user="1"] .annotation-menu:not([hidden]) {
  width: min(470px, calc(100dvw - 16px));
  max-width: calc(100dvw - 16px);
  max-height: min(76vh, 650px);
  max-height: min(76dvh, 650px);
  overflow: auto;
}
#app[data-normal-user="1"] .annotation-menu-controls {flex-wrap:wrap;}
#app[data-normal-user="1"] .annotation-menu-controls select {min-width:0;max-width:100%;}

@media (max-width: 760px) {
  #app[data-normal-user="1"] {
    width: calc(100% - 20px);
  }
  #app[data-normal-user="1"] .workspace {
    width: 100%;
    padding: 14px;
    border-radius: 16px;
  }
  #app[data-normal-user="1"] .result-card > .editor-help {font-size: 12px;}
  #app[data-normal-user="1"] .result-document-preview,
  #app[data-normal-user="1"] .handwriting-document-preview {max-height: 70vh !important;max-height: 70dvh !important;}
  #app[data-normal-user="1"] #correction-editor .editor-card-scroll {max-height: 72vh;max-height: 72dvh;}
  #app[data-normal-user="1"] .download-button {min-height: 44px;}
  #app[data-normal-user="1"] .privacy-row {justify-content:center;}
}
@media (max-width: 480px) {
  #app[data-normal-user="1"] {width: calc(100% - 12px);}
  #app[data-normal-user="1"] .workspace {padding:10px;border-radius:12px;}
  #app[data-normal-user="1"] #results:not([hidden]) {gap:12px;}
  #app[data-normal-user="1"] #results > .result-card {padding:10px;border-radius:10px;}
  #app[data-normal-user="1"] .card-heading {align-items: stretch;}
  #app[data-normal-user="1"] .card-heading > div {flex-basis:100%;}
  #app[data-normal-user="1"] .card-heading .download-button {width:100%;}
  #app[data-normal-user="1"] .drop-field {min-height:120px;padding:14px 10px;}
  #app[data-normal-user="1"] .drop-copy strong {font-size:16px;}
  #app[data-normal-user="1"] .drop-copy small {font-size:11px;}
  #app[data-normal-user="1"] .privacy-assurance {font-size:12px;}
  #app[data-normal-user="1"] .result-document-preview,
  #app[data-normal-user="1"] .handwriting-document-preview {max-height: 68vh !important;max-height: 68dvh !important;scrollbar-gutter:auto;}
  #app[data-normal-user="1"] #correction-editor .editor-card-scroll {max-height: 68vh;max-height: 68dvh;scrollbar-gutter:auto;}
  #app[data-normal-user="1"] #correction-editor #editor-page {
    padding: 12px 8px !important;
    font-size: 11px;
  }
  #app[data-normal-user="1"] #correction-editor .editor-line {
    grid-template-columns: minmax(0,1fr) 50px;
    gap: 5px;
  }
  #app[data-normal-user="1"] #correction-editor .editor-codes {font-size: 9px;}
  #app[data-normal-user="1"] .annotation-menu:not([hidden]) {
    position: fixed;
    left: 8px !important;
    right: 8px !important;
    top: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto;
    max-width: none;
    max-height: min(70dvh, 600px);
    padding: 12px;
    border-radius: 14px;
  }
  #app[data-normal-user="1"] .annotation-menu-controls {display:flex;flex-wrap:wrap;align-items:stretch;}
  #app[data-normal-user="1"] .annotation-menu-controls label {width:100%;}
  #app[data-normal-user="1"] .annotation-menu-controls select {flex:1 1 160px;min-height:44px;}
  #app[data-normal-user="1"] .annotation-menu-controls button {min-height:44px;}
}
/* Legacy-Upload-CSS setzt bei kleinen Screens grid-column:2/width:max-content. */
#app[data-normal-user="1"] .normal-template,
#app[data-normal-user="1"] .template-upload {
  grid-template-columns: minmax(0,1fr);
}
#app[data-normal-user="1"] .template-upload > * {
  grid-column: 1 / -1 !important;
  max-width: 100%;
  min-width: 0;
}
#app[data-normal-user="1"] .template-upload .choose-button,
#app[data-normal-user="1"] .template-upload #template-clear {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  justify-self: stretch;
}
#app[data-normal-user="1"] #template-panel,
#app[data-normal-user="1"] .template-actions {min-width:0;max-width:100%;}
#app[data-normal-user="1"] #template-canvas {display:block;max-width:100%;height:auto;}