/* Vorleser-App: was NUR diese App braucht.
   Alles Gemeinsame steht in /app/basis.css und wird davor geladen.
   Jede eigene Farbe hat ihr Paar im Dunkelmodus-Block, wie ueberall. */

.app { grid-template-rows: auto minmax(0, 1fr) auto; }

.kopf-knopf {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--blau);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.buehne {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 2px 2px 6px;
}

.abschnitt { display: grid; gap: 8px; margin-bottom: 14px; }
.abschnitt[hidden] { display: none; }

/* Bild holen: dieselben dezenten Knoepfe wie in der Collagen-App, das
   Dateifeld sitzt IM Label und ist nur unsichtbar, nie display:none. */
.vl-holen { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.vl-holknopf {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 14px;
  border: 2px solid var(--linie); border-radius: 12px;
  background: var(--karte); color: var(--text);
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  transition: transform .08s ease;
}
.vl-holknopf:active { transform: scale(.96); }
.vl-unsichtbar {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; pointer-events: none;
}

.vl-vorschau {
  position: relative;
  width: min(100%, 260px);
  margin: 0 auto;
}
.vl-vorschau img {
  width: 100%;
  border-radius: 12px;
  display: block;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
}
.vl-weg {
  position: absolute;
  top: 6px; right: 6px;
  width: 30px; height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.vl-zeile { display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; }
.vl-zeile-name { font-size: 13.5px; font-weight: 700; color: var(--leise); }
.vl-chip {
  min-height: 38px;
  padding: 0 14px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.vl-chip:active { transform: scale(.95); }
.vl-chip.an { background: var(--blau); border-color: var(--blau); color: #fff; }

/* Das Textfeld ist die Hauptflaeche: gross, ruhig, gut lesbar. */
.vl-text {
  width: 100%;
  min-height: 42vh;
  padding: 14px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  line-height: 1.55;
  resize: vertical;
}
.vl-text:focus { outline: none; border-color: var(--blau); }

.vl-unter { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vl-zaehler { font-size: 12.5px; color: var(--gedimmt); }

.vl-aktionen { display: grid; grid-template-columns: 2fr 1fr; gap: 7px; }

/* Die Arbeitsanzeige. Sie sitzt in der .huelle der Basis und damit in der
   Bildschirmmitte: das Auslesen dauert auf aelteren Geraeten spuerbar lange,
   und wer wartet, muss den Fortschritt gross vor sich sehen (Manni,
   01.08.2026). Alle Farben kommen aus der Basis und haben dort ihr
   Dunkelmodus-Paar. */
/* Volle Breite bis 340 px: der .kasten der Basis schrumpft sonst auf seinen
   Inhalt, und der Abbrechen-Knopf waere schmaler als ein Daumen. */
.vl-arbeit { width: 100%; max-width: 340px; text-align: center; }
.vl-arbeit h2 { font-size: 23px; margin: 0 0 8px; }
/* Zwei Klassen, obwohl eine reichen wuerde: die Basis setzt .kasten p und
   waere sonst staerker als eine einzelne Klasse hier. Die Zahl stand damit
   in 19 px statt gross in der Mitte. */
.vl-arbeit .vl-arbeit-zahl {
  margin: 0 0 12px;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  color: var(--blau);
  /* Gleich breite Ziffern: sonst huepft die Zahl bei jedem Zaehlschritt. */
  font-variant-numeric: tabular-nums;
}
.vl-arbeit-bahn {
  height: 12px;
  margin: 0 0 14px;
  border-radius: 999px;
  background: var(--linie);
  overflow: hidden;
}
.vl-arbeit-fuell {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--blau);
  transition: width .25s ease;
}
/* Feste Hoehe fuer die Schrittzeile: der Kasten soll beim Wechsel des
   Textes nicht springen. */
.vl-arbeit .klein { margin: 0 0 16px; min-height: 2.6em; }
/* Leiser als die Schrittzeile darueber: die Sekunde ist Beruhigung, keine
   Meldung. Die feste Hoehe haelt den Kasten in der ersten Sekunde ruhig,
   solange die Zeile noch leer ist. */
.vl-arbeit .klein.vl-arbeit-dauer {
  margin: -10px 0 14px;
  min-height: 1.4em;
  color: var(--gedimmt);
  font-variant-numeric: tabular-nums;
}
.vl-arbeit-stopp { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .vl-arbeit-fuell { transition: none; }
}

/* ---------- Sicherer Modus ----------
   Ein Schalter, der das Auslesen dauerhaft dreimal langsamer macht, gehoert
   sichtbar unter den Knopf, den er ausbremst, und braucht einen Weg zurueck. */
.vl-sicher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--karte);
  color: var(--leise);
  font-size: 13px;
  line-height: 1.35;
}
.vl-sicher > span { flex: 1; min-width: 180px; }

/* Die Stimmwahl sitzt unter dem Text, direkt ueber den Knoepfen, die sie
   betrifft. Der Name der Stimme steht dabei: sonst waehlt man blind. */
.vl-stimmzeile { margin-top: 8px; flex-wrap: wrap; }
.vl-stimmname {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: var(--gedimmt);
}

/* ---------- Werkstatt im Hinweisfenster ----------
   Selten gebraucht, dann aber dringend: deshalb unten im ⓘ und nicht auf
   der Startflaeche. */
.vl-fassung { margin: 14px 0 6px; color: var(--gedimmt); }
.vl-werkstatt { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 380px) {
  .vl-werkstatt { grid-template-columns: 1fr; }
}
.vl-befund {
  margin: 10px 0 0;
  padding: 10px;
  max-height: 40vh;
  overflow: auto;
  border-radius: 10px;
  background: var(--karte);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.45;
  /* Der Befund ist zum Vorlesen und Verschicken da: er MUSS umbrechen,
     sonst steht auf dem Handy die halbe Zeile rechts ausserhalb. */
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-user-select: text;
  user-select: text;
}
.vl-befund-kopie { width: 100%; margin-top: 8px; }

.vl-hinweis {
  margin: 0;
  font-size: 12.5px;
  color: var(--gedimmt);
  text-align: center;
  line-height: 1.35;
}


/* ---------- Ausschnitt waehlen ----------
   Gemessen und belegt: bei einer Doppelseite liest Tesseract zeilenweise quer
   ueber beide Seiten, aus zwei Texten wird ein unbrauchbarer Strom. Der einzige
   verlaessliche Ausweg ist, nur eine Seite zu uebergeben. Der Rahmen sitzt beim
   Oeffnen schon auf der erkannten Seite, ziehen muss man nur im Zweifel. */
.vl-schnitt {
  position: relative;
  display: block;
  line-height: 0;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.vl-schnitt img { display: block; width: 100%; height: auto; }
.vl-dunkel {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 13, .58);
  pointer-events: none;
}
.vl-rahmen {
  position: absolute;
  border: 2px solid var(--blau);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
  pointer-events: none;
}
.vl-griff {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--blau);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  pointer-events: auto;
  touch-action: none;
}
.vl-griff.lo { left: -15px; top: -15px; cursor: nwse-resize; }
.vl-griff.ro { right: -15px; top: -15px; cursor: nesw-resize; }
.vl-griff.lu { left: -15px; bottom: -15px; cursor: nesw-resize; }
.vl-griff.ru { right: -15px; bottom: -15px; cursor: nwse-resize; }

.vl-schnittzeile {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.vl-schnittknopf {
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}
.vl-schnitthinweis {
  flex: 1;
  min-width: 140px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--gedimmt);
}