/* ============================================================
 *  JALES – feine Motive · Foto an eine Anfrage anhängen
 *  Gehört zu assets/js/jales-foto-upload.js. Farben und Abstände aus colors_and_type.css.
 *  Seit 26.09.2026 gemeinsam für alle Anfrageformulare (vorher nur auf /eigene-fotos in der Seite).
 * ============================================================ */
.foto-feld { position: relative; border: 1.5px dashed var(--jales-linen); border-radius: var(--r-md); padding: var(--space-4); background: var(--jales-paper); }
.foto-feld > label:first-of-type { display: block; }
.foto-feld .foto-optional { font-weight: 400; opacity: .6; text-transform: none; letter-spacing: 0; font-size: 12px; }
/* „form“ davor: schlägt die Seitenregel .form-row label:not(.form-chip) (Großbuchstaben, display:block) */
form .foto-feld label.foto-knopf { display: inline-flex; width: auto; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 0 18px; border: 1.5px solid var(--jales-forest); border-radius: 999px; background: #EEF2EE; color: var(--jales-forest); font: 600 14px/1 var(--font-sans); cursor: pointer; text-transform: none; letter-spacing: 0; }
form .foto-feld label.foto-knopf svg { flex: 0 0 auto; }
form .foto-feld .foto-knopf:hover, form .foto-feld input:focus-visible + .foto-knopf { background: var(--jales-forest); color: #fff; }
form .foto-feld input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.foto-feld .foto-text { margin-top: var(--space-2); }
.foto-feld .foto-text a { color: var(--jales-forest); text-decoration: underline; text-underline-offset: 2px; }
.foto-liste { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 8px; }
.foto-eintrag { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; font: 400 13px/1.4 var(--font-sans); color: var(--jales-charcoal); }
.foto-eintrag .foto-name { overflow-wrap: anywhere; }
.foto-eintrag .foto-status { grid-column: 1; color: var(--jales-ink-2); font-size: 12.5px; }
.foto-eintrag[data-state=fertig] .foto-status { color: var(--jales-forest); font-weight: 600; }
.foto-eintrag[data-state=fehler] .foto-status { color: #8C3A20; }
.foto-eintrag .foto-balken { grid-column: 1; height: 4px; background: var(--jales-linen); border-radius: 2px; overflow: hidden; }
.foto-eintrag[data-state=fehler] .foto-balken { display: none; }
.foto-eintrag .foto-balken span { display: block; height: 100%; width: 0; background: var(--jales-forest); transition: width .2s; }
.foto-eintrag .foto-weg { grid-column: 2; grid-row: 1 / span 3; min-width: 44px; min-height: 44px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--jales-ink-2); cursor: pointer; }
.foto-hinweis { font: 500 13px/1.5 var(--font-sans); color: #8C3A20; margin: var(--space-2) 0 0; }