/* ==========================================================================
   Eigener Datei-Knopf — für ALLE Bereiche
   ==========================================================================

   🔴 Warum diese Datei (18.08.2026, Fabi):
        „kontrolliere überall im Backend ob in der spanischen Version alle
         Datei-Auswahl-Buttons auf Spanisch stehen. ausserdem will ich einen
         eigenen Button und kein Systembutton. […] ausserdem ist der Button
         nicht auf der Höhe der Auswahlfenster."

      Die Beschriftung eines Datei-Feldes kommt vom BROWSER und folgt dessen
      Sprache — auf einem deutschen Windows steht in der spanischen Verwaltung
      „Datei auswählen / Keine ausgewählt". Weder HTML noch CSS ändern daran
      etwas. Also: echtes Feld verbergen, eigenen Knopf davorstellen.

      Die Regeln lagen bis zum 18.08.2026 in admin.css. Dort erreichten sie nur
      die Verwaltung; Hüttenbereich, Buchhaltung, Personal und die öffentlichen
      Seiten laden andere Stylesheets. Deshalb eine eigene Datei, die überall
      eingebunden wird.

   🔴 Farben über var(…, Rückfall): die Bereiche führen eigene Variablensätze.
      Ohne Rückfall stünde im Hüttenbereich ein unsichtbarer Rahmen.

   Ohne JavaScript bleibt das native Feld sichtbar und bedienbar (Klasse
   `ist-eigen` setzt erst das Skript) — dann eben mit Browser-Beschriftung.
   Das ist der harmlosere Ausfall.
   -------------------------------------------------------------------------- */

/*
 * Zwei Stellschrauben je Bereich. Die Vorgabe sind die 39 Punkte der
 * Verwaltung; wo die Felder anders hoch sind, wird nur die Variable neu
 * gesetzt und nicht die halbe Datei kopiert.
 */
:root {
  --datei-zeile: 39px;
  --datei-knopf: 30px;
}

.a-datei {
  /*
   * Flex statt Block: als Block-Kasten nahm die Huelle den Zeilenumbruch
   * hinter dem Etikett als Textzeile mit und war dadurch fuenf Punkte hoeher
   * als ihr Inhalt (gemessen 18.08.2026: 65.9 statt 60.9). Da die Felder in
   * ihrer Reihe mittig sitzen, sass die ganze Spalte dadurch zu hoch.
   */
  display: flex;
  flex-direction: column;
  width: 100%;
}

.a-datei > .a-datei__label {
  /*
   * `margin: 0` ist noetig: admin.css gibt jedem <label> fuenf Punkte
   * Aussenabstand nach unten. Die Nachbarfelder tragen ihn nicht, weil ihr
   * Etikett selbst die Feldhuelle ist — bei uns steckt das Etikett eine Ebene
   * tiefer. Gemessen am 18.08.2026: Huelle 65.9 statt 60.9 Punkte, die Spalte
   * sass dadurch zweieinhalb Punkte zu hoch.
   */
  margin: 0;
  display: flex;
  flex-direction: column;
  /*
   * 5px Abstand und 16.875px Zeilenhöhe sind kein Zufall: genau so misst ein
   * .a-filter__feld daneben. Mit den vorherigen 6px/19.4px sass die Knopfzeile
   * drei Punkte hoeher als das Auswahlfeld neben ihr (gemessen 18.08.2026 auf
   * /admin/titulares: 426 gegen 429) — der schiefe Eindruck, den Fabi
   * beschrieben hat.
   */
  gap: 5px;
  cursor: pointer;
}

.a-datei__beschreibung {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-leise, #6d7d8e);
}

/*
 * Die Zeile ist der Ersatz für das native Feld und trägt deshalb dessen
 * Optik: gleiche Höhe (38px), gleicher Rahmen, gleiche Rundung wie ein
 * Texteingabefeld. Vorher stand der graue Systemknopf ohne Rahmen daneben und
 * saß sichtbar tiefer als das Feld links davon (Fabis „nicht auf der Höhe").
 */
.a-datei__zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  /*
   * 39px, weil ein Auswahlfeld daneben genau so hoch ist (gemessen am
   * 18.08.2026 auf /admin/titulares). Bei 38px stand die Zeile zwei Punkte
   * ueber ihrem Nachbarn — die Reihe wirkte schief, was Fabi als „der Button
   * ist nicht auf der Hoehe der Auswahlfenster" beschrieben hat. Die Felder
   * sind in ihrer Reihe mittig ausgerichtet, deshalb schlaegt jeder
   * Hoehenunterschied als Versatz durch.
   */
  min-height: var(--datei-zeile);
  padding: 3px 6px 3px 4px;
  border: 1px solid var(--linie-satt, #d2dfeb);
  border-radius: var(--r-klein, 10px);
  background: var(--weiss, #ffffff);
  box-sizing: border-box;
}

.a-datei__zeile:hover { border-color: var(--text-leise, #6d7d8e); }

/* Tastaturweg sichtbar machen: der Knopf ist ein span, kein <button>. */
.a-datei__knopf:focus-visible {
  outline: 2px solid var(--blau, #2f6fd0);
  outline-offset: 2px;
}

/*
 * Der Knopf sitzt IM Rahmen und ist deshalb kleiner als ein freistehender:
 * 28px hoch, damit die Zeile insgesamt auf 38px bleibt.
 */
.a-datei__knopf {
  /*
   * Feste Hoehe, nicht `min-height`: die Knopf-Klassen der Bereiche bringen
   * eigene Innenabstaende mit (die Verwaltung 10px, der Huettenbereich 13px).
   * Mit einer Mindesthoehe schob dieses Innenmass die Zeile ueber die
   * Feldhoehe hinaus — auf der oeffentlichen Seite auf 57.5 statt 56 Punkte.
   * Der Text ist einzeilig, also ist die feste Hoehe hier gefahrlos.
   */
  height: var(--datei-knopf);
  /*
   * `min-height: 0` raeumt die Mindesthoehe der Bereichs-Knoepfe ab. Ohne sie
   * gewinnt die groessere Zahl: der Knopf der Buchhaltung bringt 44 Punkte mit
   * und machte die Zeile 52 Punkte hoch, neben Feldern von 47 (gemessen
   * 18.08.2026 auf /admin/contabilidad/banco).
   */
  min-height: 0;
  padding: 0 14px;
  font-size: 13px;
  white-space: nowrap;
}

.a-datei__name {
  flex: 1 1 120px;
  font-size: 13px;
  color: var(--text-leise, #6d7d8e);
  overflow-wrap: anywhere;
}

.a-datei__hinweis {
  font-size: 12px;
  color: var(--text-leise, #6d7d8e);
}

/*
 * 🔴 Der Selektor trägt `.a-formular` und `.a-filter` mit, obwohl das Feld
 *    auch ohne Formularhülle versteckt gehört. Grund ist ein Wettstreit, den
 *    die kürzere Fassung verliert:
 *
 *      .a-datei.ist-eigen .a-datei__feld                        (0,3,0)
 *      .a-formular input:not([type=checkbox]):not([type=radio]) (0,3,1)  gewinnt
 *
 *    Die zweite Regel gibt jedem Eingabefeld `width: 100%`. Bei einem absolut
 *    positionierten Feld bezieht sich das auf den nächsten positionierten
 *    Vorfahren — gemessen am 17.08.2026 auf /admin/betreiber/aushaenge:
 *    791 Punkte breit, 942 Punkte Querlauf auf der GANZEN Seite. Zu sehen war
 *    davon nichts (opacity 0), zu spüren die Seite, die sich waagerecht
 *    schieben ließ.
 *
 *    `max-width` hält zusätzlich dagegen, falls später eine weitere
 *    Breitenregel dazukommt. Die Bereichs-Präfixe (b-, bh-, p-) stehen aus
 *    demselben Grund mit dabei.
 */
.a-datei.ist-eigen .a-datei__feld {
  /*
   * Nicht `display: none`: ein verborgenes Pflichtfeld liesse sich vom Browser
   * nicht anspringen, und die Fehlermeldung „Bitte eine Datei auswählen"
   * zeigte auf nichts. Stattdessen unsichtbar, aber vorhanden.
   *
   * 🔴 `!important` ist hier kein Notnagel, sondern der einzige verlaessliche
   *    Weg. Jeder Bereich gibt seinen Eingabefeldern Breite und Hoehe, und
   *    manche dieser Regeln sind spezifischer als jede vertretbare Fassung
   *    dieser hier — gemessen am 18.08.2026 auf /admin/titulares:
   *
   *      .a-karte .a-filter__feld input:not([type=checkbox]):not([type=radio])
   *      → width: 100 %, min-height: 38px                       (0,4,1)
   *
   *    Das Feld war dadurch 24 Punkte breit und 38 hoch statt 1×1. Sichtbar
   *    war davon wegen `opacity` nichts, anklickbar aber schon — ein zweiter,
   *    unsichtbarer Knopf neben dem eigenen. Wer die Regel entschaerfen will,
   *    muesste jede Breitenregel aller fuenf Bereiche kennen.
   */
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.a-datei:not(.ist-eigen) .a-datei__knopf { display: none; }
.a-datei:not(.ist-eigen) .a-datei__name  { display: none; }

/* Ohne Skript trägt die Zeile keinen Inhalt — dann auch keinen Rahmen. */
.a-datei:not(.ist-eigen) .a-datei__zeile {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* Eine gewählte Datei wird satt geschrieben, nicht leise. */
.a-datei.hat-datei .a-datei__name {
  color: var(--text, #0f1620);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Fingerbedienung: Hüttenbereich und Mitarbeiter-Bereich
   --------------------------------------------------------------------------
   Beide Bereiche werden am Telefon bedient und führen deshalb 48px hohe
   Knöpfe. Ein 28px-Knopf wie in der Verwaltung wäre dort ein Rückschritt —
   die Trefferfläche liegt unter den 44px, die eine Fingerkuppe braucht.
   -------------------------------------------------------------------------- */
.a-datei--gross {
  /*
   * 52 Punkte sind die Feldhoehe im Huettenbereich (gemessen 18.08.2026 auf
   * /operador/fotos-producto). Der Knopf bleibt mit 44 Punkten ueber der
   * Fingerkuppen-Grenze: 44 + 6 Innenabstand + 2 Rahmen ergeben genau 52.
   */
  --datei-zeile: 52px;
  --datei-knopf: 44px;
}

.a-datei--gross .a-datei__zeile {
  padding: 3px 8px 3px 3px;
  gap: 12px;
}

.a-datei--gross .a-datei__knopf {
  padding: 0 18px;
  font-size: 15px;
}

/*
 * Buchhaltung: dort sind die Felder 47 Punkte hoch.
 */
.bh-feld .a-datei {
  --datei-zeile: 47px;
  --datei-knopf: 39px;
}

/* --------------------------------------------------------------------------
   Oeffentliche Seite
   --------------------------------------------------------------------------
   Dort sind Eingabefelder 56 Punkte hoch — gemessen am 18.08.2026 am Feld
   „Website" des Bewerbungsformulars. Mit den 39 Punkten der Verwaltung sass
   die Knopfzeile darunter sichtbar zu niedrig.
   -------------------------------------------------------------------------- */
.feld .a-datei,
.formular .a-datei {
  --datei-zeile: 56px;
  --datei-knopf: 48px;
}

.feld .a-datei .a-datei__knopf,
.formular .a-datei .a-datei__knopf {
  padding: 0 20px;
  font-size: 15px;
}

.a-datei--gross .a-datei__name { font-size: 14px; }

/* Am Telefon nebeneinander zu eng: dann untereinander, Knopf über die Breite. */
@media (max-width: 480px) {
  .a-datei--gross .a-datei__zeile { align-items: stretch; }
  .a-datei--gross .a-datei__knopf { width: 100%; }
}

/* ==========================================================================
   Die Sofortvorschau — für ALLE Bereiche
   ==========================================================================

   🔴 Fabi (21.08.2026): „wenn ich das foto hochlade muss es auch darunter
      angezeigt werden."

      Nach der Auswahl stand nur der Dateiname da. „Screenshot 2025-11-12
      091114.png" sagt niemandem, ob das richtige Bild gewählt wurde — am Handy,
      wo die Galerie zwanzig ähnliche Aufnahmen zeigt, erst recht nicht.

      Den Behälter legt js/datei-knopf.js selbst an. So bekommt jedes
      Datei-Feld im Portal, in der Verwaltung und auf der öffentlichen Seite die
      Vorschau, ohne dass eine einzige Ansicht angefasst wird.
   -------------------------------------------------------------------------- */

.a-datei__vorschau {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/*
 * Feste Höhe, Breite nach Bild: so stehen Hoch- und Querformat in einer
 * ruhigen Reihe, statt die Zeile bei jedem zweiten Bild umbrechen zu lassen.
 * `object-fit: cover` schneidet zu, statt zu verzerren — ein gestauchtes
 * Gerätefoto wäre als Beleg wertlos.
 */
.a-datei__vorschaubild {
  display: block;
  height: 96px;
  width: auto;
  max-width: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--linie, #d2dfeb);
  background-color: #fff;
}

/* Am Telefon kleiner: bei vierzig Produktfotos zählt jede Zeile. */
@media (max-width: 480px) {
  .a-datei__vorschaubild { height: 72px; }
}

/* ==========================================================================
   Ein Name je gewähltem Foto (21.08.2026)
   ==========================================================================

   Fabi: „ich muss dem produkt einen namen geben können."

   🔴 Das Stück ist eine SPALTE: Bild oben, Feld darunter. Nebeneinander wäre
      bei vier Fotos eine Zeile aus acht Kästen, in der niemand mehr sieht,
      welches Feld zu welchem Bild gehört.
   -------------------------------------------------------------------------- */
.a-datei__stueck {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Breit genug für einen Produktnamen, schmal genug für vier je Zeile. */
  width: 168px;
  max-width: 100%;
}

.a-datei__stueck .a-datei__vorschaubild {
  width: 100%;
  height: 112px;
}

.a-datei__name-feld {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.78rem;
  color: var(--gedaempft, #5b6b7c);
}

.a-datei__name-feld input {
  width: 100%;
  padding: 7px 9px;
  font-size: 0.88rem;
  color: var(--text, #0f1620);
  background-color: #fff;
  border: 1px solid var(--linie, #d2dfeb);
  border-radius: 8px;
}

.a-datei__name-feld input:focus-visible {
  outline: 2px solid var(--b-blau, #1f7ac0);
  outline-offset: 1px;
}

@media (max-width: 480px) {
  .a-datei__stueck { width: 132px; }
  .a-datei__stueck .a-datei__vorschaubild { height: 88px; }
}