/* Baustein unterschriften: Abschnitt "Unterschriften" (Bedienkonzept
   E36). Ausrollen bis zur Begehung, Bauplan 3B. Besitzer: B1d. Am Geraet
   C1a. Leer angelegt von B0a. Die Grundvorlage bindet die Datei nach dem
   globalen Stylesheet ein. Nur Regeln fuer eigene, neue Klassen; Farben als
   Token mit Rueckfall; eine Regel fuer die Telefonbreite (560px). Kein Gruen
   fuer Unterschriebenes (der Stand ist eine Stand-Pille aus pillen.css). */

/* Ein Inhalt je Abschnitt; Absaetze, Tabelle und Formulare mit gleichem
   Abstand. */
.unterschriften > * + * { margin-top: 12px; }

/* "unterschrieben n von m": die Zahl ist der Kopf des Abschnitts. */
.unterschriften-stand { margin: 0; color: var(--navy, #1F4570); }
.unterschriften-stand strong { font-variant-numeric: tabular-nums; }

/* Zeilen: Rolle und Name duerfen umbrechen, Pille und Knoepfe nicht. */
.liste.unterschriften-tabelle { margin-top: 0; }
.liste.unterschriften-tabelle td:nth-child(3),
.liste.unterschriften-tabelle td:last-child { white-space: nowrap; }

/* Scan und "Scan hochladen" bzw. "Blatt ersetzen" in einer Zeile. */
.unterschriften-blatt {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

/* Das Formular einer Zeile in der Folgeeingabe. */
.unterschriften-formular {
  display: flex; flex-direction: column; gap: 12px;
  padding: 14px 16px; border-radius: 10px;
  background: var(--grau-hell, #f4f6f9);
  border: 1px solid var(--border, #e2e7ee);
}

/* Zeilen eines Moduls mit eigenem Speicher (C1a): die Pille bricht nicht um. */
.liste.unterschriften-zeilen { margin-top: 0; }
.unterschriften-stand-spalte { white-space: nowrap; }

/* Das Bild am Geraet: klein in der Zeile, im Mass des Zeichenfelds (3:1). */
.unterschriften-bild {
  display: block; width: 150px; height: 50px; object-fit: contain;
  border-bottom: 1px solid var(--border, #e2e7ee);
}
.unterschriften-hinweis { color: var(--muted, #5f7183); }
/* Nur unten: den Abstand nach oben gibt .unterschriften > * + *. */
.unterschriften-scan { margin-bottom: 0; }

/* Das Zeichenfeld: gross genug fuer den Finger, Seitenverhaeltnis aus width
   und height am canvas. touch-action: none, sonst scrollt der Strich die Seite. */
.unterschriften-feld-titel {
  margin: 0 0 6px; font-weight: 600; font-size: 0.9rem;
}
.unterschriften-flaeche {
  display: block; width: 100%; max-width: 480px; height: auto;
  border: 1px dashed var(--border, #e2e7ee); border-radius: 8px;
  background: var(--surface, #ffffff); touch-action: none; cursor: crosshair;
}
.unterschriften-leeren { margin-top: 8px; }

/* Ein Haken je Zeile im Formular des Scans, der Name darunter. */
.unterschriften-haken { display: flex; flex-direction: column; gap: 6px; }
.unterschriften-haken + .unterschriften-haken { margin-top: 10px; }

@media (max-width: 560px) {
  .liste.unterschriften-tabelle td:nth-child(3),
  .liste.unterschriften-tabelle td:last-child { white-space: normal; }
  .unterschriften-stand-spalte { white-space: normal; }
  .unterschriften-formular { padding: 12px; }
}