/* ==========================================================================
   Küchentisch – Foto (L5): Kachel, Aufnahme, Vorschau.
   Nur Variablen aus basis.css (L1); keine eigenen Farben oder Schriften.
   Ohne JavaScript bleibt ein gewöhnliches Dateifeld sichtbar (Spezifikation §4.4, Punkt 4).
   ========================================================================== */

.foto { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--rund-m); overflow: hidden; background: var(--tisch); border: 1px solid var(--linie); }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto--quadrat { aspect-ratio: 1; }
.foto [data-foto-bild] { position: absolute; inset: 0; }
.foto [data-foto-bild] a { display: block; width: 100%; height: 100%; }
.foto [data-foto-bild] svg { width: 100%; height: 100%; display: block; }

.foto__leer {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--a2);
  width: 100%; height: 100%; padding: var(--a4);
  border: 2px dashed var(--rand); border-radius: var(--rund-m); background: transparent;
  color: var(--leise); font: inherit; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
}
.foto__leer .symbol { width: 2.5rem; height: 2.5rem; color: var(--primaer); }
.foto__leer:hover, .foto__leer:focus-visible { background: var(--primaer-hell); }
.foto__leer--still { cursor: default; }
.foto__leer--still:hover { background: transparent; }

.foto__knopf { position: absolute; right: var(--a2); bottom: var(--a2); }
.foto__marke { position: absolute; left: var(--a2); top: var(--a2); }
.foto__zeile { display: flex; flex-wrap: wrap; gap: var(--a2); align-items: center; margin-top: var(--a2); }

.foto-reihe { display: grid; grid-auto-flow: column; grid-auto-columns: 7.5rem; gap: var(--a2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--a2); }
.foto-reihe > * { scroll-snap-align: start; }

/* Aufnahme: das echte Dateifeld ist unsichtbar, sobald das Skript läuft (Klasse setzt foto.js). */
.foto-aufnahme [hidden] { display: none; }
.foto-wahl-feld { display: grid; gap: var(--a1); margin-top: var(--a2); font-weight: 700; }
.foto-aufnahme--js .foto-wahl-feld { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; margin: 0; }
.foto-wahl { max-width: 100%; }

/* Ohne JavaScript: keine toten Knöpfe, keine leere Kachel – nur das Dateifeld. */
.foto-aufnahme:not(.foto-aufnahme--js) [data-foto-oeffnen],
.foto-aufnahme:not(.foto-aufnahme--js) [data-foto-galerie],
.foto-aufnahme:not(.foto-aufnahme--js) .foto:not(.hat-foto) { display: none; }